iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >JS如何实现请求调度器
  • 467
分享到

JS如何实现请求调度器

2023-06-07 23:06:41 467人浏览 安东尼
摘要

这篇文章给大家分享的是有关js如何实现请求调度器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。为了获取一批互不依赖的资源,通常从性能考虑可以用 Promise.all(arrayOfPromises)来并发执行。

这篇文章给大家分享的是有关js如何实现请求调度器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

为了获取一批互不依赖的资源,通常从性能考虑可以用 Promise.all(arrayOfPromises)并发执行。比如我们已有 100 个应用的 id,需求是聚合所有应用的 PV,我们通常会这么写:

const ids = [1001, 1002, 1003, 1004, 1005];const urlPrefix = 'Http://opensearch.example.com/api/apps';// fetch 函数发送 HTTP 请求,返回 Promiseconst appPromises = ids.map(id => `${urlPrefix}/${id}`).map(fetch);Promise.all(appPromises) // 通过 reduce 做累加 .then(apps => apps.reduce((initial, current) => initial + current.pv, 0)) .catch((error) => console.log(error));

上面的代码在应用个数不多的情况下,可以运行正常。当应用个数达到成千上万时,对支持并发数不是很好的系统,你的「压测」会把第三放服务器搞挂,暂时无法响应请求:

<html><head><title>502 Bad Gateway</title></head><body bGColor="white"><center><h2>502 Bad Gateway</h2></center><hr><center>Nginx/1.10.1</center></body></html>

如何解决呢?

一个很自然的想法是,既然不支持这么多的并发请求,那就分割成几大块,每块为一个 chunkchunk 内部的请求依然并发,但块的大小(chunkSize)限制在系统支持的最大并发数以内。前一个 chunk 结束后一个 chunk 才能继续执行,也就是说 chunk 内部的请求是并发的,但 chunk 之间是串行的。思路其实很简单,写起来却有一定难度。总结起来三个操作:分块、串行、聚合

难点在如何串行执行 Promise,Promise 仅提供了并行(Promise.all)功能,并没有提供串行功能。我们从简单的三个请求开始,看如何实现,启发式解决问题(heuristic)。

// task1, task2, task3 是三个返回 Promise 的工厂函数,模拟我们的异步请求const task1 = () => new Promise((resolve) => { setTimeout(() => { resolve(1); console.log('task1 executed'); }, 1000);});const task2 = () => new Promise((resolve) => { setTimeout(() => { resolve(2); console.log('task2 executed'); }, 1000);});const task3 = () => new Promise((resolve) => { setTimeout(() => { resolve(3); console.log('task3 executed'); }, 1000);});// 聚合结果let result = 0;const resultPromise = [task1, task2, task3].reduce((current, next) =>   current.then((number) => { console.log('resolved with number', number); // task2, task3 的 Promise 将在这里被 resolve result += number; return next(); }),  Promise.resolve(0)) // 聚合初始值 .then(function(last) { console.log('The last promise resolved with number', last); // task3 的 Promise 在这里被 resolve result += last; console.log('all executed with result', result); return Promise.resolve(result); });

运行结果如图 1:

JS如何实现请求调度器

代码解析:我们想要的效果,直观展示其实是 fn1().then(() => fn2()).then(() => fn3())。上面代码能让一组 Promise 按顺序执行的关键之处就在 reduce 这个“引擎”在一步步推动 Promise 工厂函数的执行。

难点解决了,我们看看最终代码:

function fetch(url) { console.log(`Fetching ${url}`); return new Promise((resolve) => { setTimeout(() => resolve({ pv: Number(url.match(/\d+$/)) }), 2000); });}const urlPrefix = 'http://opensearch.example.com/api/apps';const aggregator = {  start() { return this.fetchAppIds() .then(ids => this.fetchAppsSerially(ids, 2)) .then(apps => this.sumPv(apps)) .catch(error => console.error(error)); },   fetchAppIds() { return Promise.resolve([1001, 1002, 1003, 1004, 1005]); }, promiseFactory(ids) { return () => Promise.all(ids.map(id => `${urlPrefix}/${id}`).map(fetch)); },   fetchAppsSerially(ids, concurrency = 100) { // 分块 let chunkOfIds = ids.splice(0, concurrency); const tasks = [];  while (chunkOfIds.length !== 0) { tasks.push(this.promiseFactory(chunkOfIds)); chunkOfIds = ids.splice(0, concurrency); }  // 按块顺序执行 const result = []; return tasks.reduce((current, next) => current.then((chunkOfApps) => { console.info('Chunk of', chunkOfApps.length, 'concurrency requests has finished with result:', chunkOfApps, '\n\n'); result.push(...chunkOfApps); // 拍扁数组 return next(); }), Promise.resolve([])) .then((lastchunkOfApps) => { console.info('Chunk of', lastchunkOfApps.length, 'concurrency requests has finished with result:', lastchunkOfApps, '\n\n'); result.push(...lastchunkOfApps); // 再次拍扁它 console.info('All chunks has been executed with result', result); return result; }); },   sumPv(apps) { const initial = { pv: 0 }; return apps.reduce((accumulator, app) => ({ pv: accumulator.pv + app.pv }), initial); }};// 开始运行aggregator.start().then(console.log);

运行结果如图 2:

JS如何实现请求调度器

抽象和复用

目的达到了,因具备通用性,下面开始抽象成一个模式以便复用。

串行

先模拟一个 http get 请求。

function httpGet(url) { const delay = Math.random() * 1000; console.info('GET', url); return new Promise((resolve) => { setTimeout(() => { resolve({ url, delay, at: Date.now() }) }, delay); })}

串行执行一批请求。

const ids = [1, 2, 3, 4, 5, 6, 7];// 批量请求函数,注意是 delay 执行的『函数』对了,否则会立即将请求发送出去,达不到串行的目的const httpGetters = ids.map(id =>  () => httpGet(`https://JSONplaceholder.typicode.com/posts/${id}`));// 串行执行之const tasks = await httpGetters.reduce((acc, cur) => { return acc.then(cur);  // 简写,等价于 // return acc.then(() => cur());}, Promise.resolve());tasks.then(() => { console.log('done');});

注意观察控制台输出,应该串行输出以下内容:

GET https://jsonplaceholder.typicode.com/posts/1GET https://jsonplaceholder.typicode.com/posts/2GET https://jsonplaceholder.typicode.com/posts/3GET https://jsonplaceholder.typicode.com/posts/4GET https://jsonplaceholder.typicode.com/posts/5GET https://jsonplaceholder.typicode.com/posts/6GET https://jsonplaceholder.typicode.com/posts/7

分段串行,段中并行

重点来了。本文的请求调度器实现

function schedulePromises(factories, concurrency) {  const chunk = (arr, size = 1) => { return arr.reduce((acc, cur, idx) => { const modulo = idx % size; if (modulo === 0) { acc[acc.length] = [cur]; } else { acc[acc.length - 1].push(cur); } return acc; }, []) }; const chunks = chunk(factories, concurrency); let resps = []; return chunks.reduce( (acc, cur) => { return acc .then(() => {  console.log('---');  return Promise.all(cur.map(f => f())); }) .then((intermediateResponses) => {  resps.push(...intermediateResponses);  return resps; }) }, Promise.resolve() );}

测试下,执行调度器:

// 分段串行,段中并行schedulePromises(httpGetters, 3).then((resps) => { console.log('resps:', resps);});

控制台输出:

---GET https://jsonplaceholder.typicode.com/posts/1GET https://jsonplaceholder.typicode.com/posts/2GET https://jsonplaceholder.typicode.com/posts/3---GET https://jsonplaceholder.typicode.com/posts/4GET https://jsonplaceholder.typicode.com/posts/5GET https://jsonplaceholder.typicode.com/posts/6---GET https://jsonplaceholder.typicode.com/posts/7resps: [ { "url": "https://jsonplaceholder.typicode.com/posts/1", "delay": 733.010980640727, "at": 1615131322163 }, { "url": "https://jsonplaceholder.typicode.com/posts/2", "delay": 594.5056229848931, "at": 1615131322024 }, { "url": "https://jsonplaceholder.typicode.com/posts/3", "delay": 738.8230109146299, "at": 1615131322168 }, { "url": "https://jsonplaceholder.typicode.com/posts/4", "delay": 525.4604386109747, "at": 1615131322698 }, { "url": "https://jsonplaceholder.typicode.com/posts/5", "delay": 29.086379722201183, "at": 1615131322201 }, { "url": "https://jsonplaceholder.typicode.com/posts/6", "delay": 592.2345027398272, "at": 1615131322765 }, { "url": "https://jsonplaceholder.typicode.com/posts/7", "delay": 513.0684467560949, "at": 1615131323284 }]

感谢各位的阅读!关于“JS如何实现请求调度器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: JS如何实现请求调度器

本文链接: https://www.lsjlt.com/news/250423.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS如何实现请求调度器
    这篇文章给大家分享的是有关JS如何实现请求调度器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。为了获取一批互不依赖的资源,通常从性能考虑可以用 Promise.all(arrayOfPromises)来并发执行。...
    99+
    2023-06-07
  • 原生js+jquery+ajax请求以及jsonp如何调用
    这篇文章主要为大家展示了“原生js+jquery+ajax请求以及jsonp如何调用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“原生js+jquery+aja...
    99+
    2024-04-02
  • 如何实现Ajax请求
    小编给大家分享一下如何实现Ajax请求,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Ajax不是一种新的编程语言,而是一种用于创...
    99+
    2024-04-02
  • JS如何实现跨域请求外部服务器的资源
    小编给大家分享一下JS如何实现跨域请求外部服务器的资源,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!tomcat服务器提供的接口...
    99+
    2024-04-02
  • js与jQuery如何实现的兼容多浏览器Ajax请求
    这篇文章主要介绍js与jQuery如何实现的兼容多浏览器Ajax请求,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!ajax我们经常会用到的,但网上找到的大部份ajax兼容性都不强,下...
    99+
    2024-04-02
  • JS如何请求servlet功能
    这篇文章将为大家详细讲解有关JS如何请求servlet功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:前端js代码://创建ajax请求对象 var ...
    99+
    2024-04-02
  • js实现axios限制请求队列
    目录背景是:会造成什么情况呢?背景是: 在实际开发中,可能会遇到网络问题或者查询量比较大的情况,上一个请求还没有完成,用户就发起了下一个请求。 会造成什么情况呢? 但是同一个请求多次...
    99+
    2024-04-02
  • 如何实现Jquery Ajax请求
    如何实现Jquery Ajax请求,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 jQuery确实是一个挺好的轻量级的JS框架,能帮...
    99+
    2024-04-02
  • 利用Java实现调用http请求
    目录一、概述二、 Java调用第三方http接口的方式2.1、通过JDK网络类Java.net.HttpURLConnection2.2 通过apache common封装好的Htt...
    99+
    2024-04-02
  • vue如何实现发送websocket请求和http post请求
    这篇文章主要介绍vue如何实现发送websocket请求和http post请求,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!先给大家介绍下vue发送websocket请求和http...
    99+
    2024-04-02
  • Nginx请求压缩如何实现
    本篇内容主要讲解“Nginx请求压缩如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Nginx请求压缩如何实现”吧!一、介绍请求压缩,是将服务器的结果通过 Nginx 将内容进行压缩后,在...
    99+
    2023-07-05
  • Tomcat9如何实现请求处理
    这篇文章给大家分享的是有关Tomcat9如何实现请求处理的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。请求处理Tomcat对于HTTP请求,会由Connector监听的端口,通过线程池的处理进行多线程的处理。此线...
    99+
    2023-06-02
  • Flask如何实现请求钩子
    这篇文章将为大家详细讲解有关Flask如何实现请求钩子,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在 Web 应用中,有时需要在响应请求前或者响应请求后做一些处理,为了让每个视图函数避免编写重复功能的代...
    99+
    2023-06-21
  • PHP如何实现网络请求
    这篇“PHP如何实现网络请求”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“PHP如何实现网络请求”文章吧。一、分析php发送...
    99+
    2023-07-02
  • 如何实现前端ajax请求
    小编给大家分享一下如何实现前端ajax请求,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言AJAX,Asynchronous ...
    99+
    2024-04-02
  • js分页之如何实现前端代码和请求处理
    小编给大家分享一下js分页之如何实现前端代码和请求处理,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下index.html<!DOCTYPE html> &...
    99+
    2024-04-02
  • 如何基于JS实现Ajax并发请求的控制详解
    目录前言 Ajax的串行与并行Ajax的并发请求控制的两大解决方案 基于Promise递归实现 基于Class实现 代码展示 总结 前言 最近看到一个面试题,当然了,就是这篇文章的...
    99+
    2024-04-02
  • vue轮询请求如何实现
    今天小编给大家分享一下vue轮询请求如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。...
    99+
    2024-04-02
  • react axios请求拦截如何实现
    这篇“react axios请求拦截如何实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react axios请求拦截如何...
    99+
    2023-07-04
  • vue如何实现第三方请求
    本文小编为大家详细介绍“vue如何实现第三方请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue如何实现第三方请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue实现第三方请求的方法:1、通过“impo...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作