使用Promise.all实现限制并发请求函数
发布日期:2021-05-04 18:16:52 浏览次数:27 分类:原创文章

本文共 1550 字,大约阅读时间需要 5 分钟。

文章目录

Promise.all 的简单解释:

// 当以下数组中promise1, promise2, promise3都resolve之后,触发promise.all的then函数。Promise.all([promise1, promise2, promise3]).then((values) => {     console.log(values);});

需求解释

所谓并发请求,即有待请求接口100个,限制每次只能发出10个。即同一时刻最多有10个正在发送的请求。

每当10个之中有一个请求完成,则从待请求的接口中再取出一个发出。保证当前并发度仍旧为10。

直至最终请求完成。

设计思路

简单思路如下:(假设并发请求函数名字为limitedRequest)

  • 设定一个数组(命名为:pool),用于后续Promise.all的使用
  • 当limitedRequest被调用的时候,首先一次性发出10个请求,并放入到pool中
  • 每一个请求完成后的回调函数中继续触发下一个请求,而下一个请求返回Promise,他的回调函数继续绑定同样的回调函数,即循环调用。(看不懂就直接看代码更易懂)
  • 直到全部请求完成,停止。

代码实现

具体代码如下

// 模仿一个fetch的异步函数,返回promisefunction mockFetch(param) {     return new Promise((resovle) => {       setTimeout(() => {         resovle(param);    }, 2000);  });}function limitedRequest(urls, maxNum) {     const pool = [];  // 处理maxNum比urls.length 还要大的情况。  const initSize = Math.min(urls.length, maxNum);  for (let i = 0; i < initSize; i++) {     	// 一次性放入初始的个数    pool.push(run(urls.splice(0, 1)));  }  // r 代表promise完成的resolve回调函数  // r 函数无论什么样的结果都返回promise,来确保最终promise.all可以正确执行  function r() {       console.log('当前并发度:', pool.length);    if (urls.length === 0) {         console.log('并发请求已经全部发起');      return Promise.resolve();    }    return run(urls.splice(0, 1));  }  // 调用一次请求  function run(url) {       return mockFetch(url).then(r);  }  // 全部请求完成的回调  Promise.all(pool).then(() => {       console.log('请求已经全部结束');  });}// 函数调用limitedRequest([1, 2, 3, 4, 5, 6, 7, 8], 3);
# 最终返回结果$ node .\src\views\doc\detail\index.js当前并发度: 3当前并发度: 3当前并发度: 3当前并发度: 3当前并发度: 3当前并发度: 3并发请求已经全部发起当前并发度: 3并发请求已经全部发起当前并发度: 3并发请求已经全部发起请求已经全部结束
上一篇:npm package.json private字段的作用
下一篇:vue-cli hot-module-replacement不生效,不自动更新。

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2025年03月20日 04时13分40秒