js Promise并发控制数量的方法

目录
  • 问题
  • 背景
  • 思路 & 实现

问题

要求写一个方法控制 Promise 并发数量，如下：

promiseConcurrencyLimit(limit, array, iteratorFn)

limit 是同一时间执行的 promise 数量，array 是参数数组，iteratorFn 每个 promise 中执行的异步操作。

背景

开发中需要在多个promise处理完成后执行后置逻辑，通常使用Promise.all：

Primise.all([p1, p2, p3]).then((res) => ...)

但是有个问题是，因为 promise 创建后会立即执行，也就是说传入到 promise.all 中的多个 promise 实例，在其创建的时候就已经开始执行了，如果这些实例中执行的异步操作都是 http 请求，那么就会在瞬间发出 n 个 http 请求，这样显然是不合理的；更合理的方式是：对 Promise.all 中异步操作的执行数量加以限制，同一时间只允许有 limit 个异步操作同时执行。

思路 & 实现

在背景中提到，promise 在创建后就会立即执行，所以控制并发的核心在于控制 promise 实例的生成。最开始只生成 limit 个 promise 实例，然后等待这些 promise 状态变更，只要其中某一个 promise 实例的状态发生变更，就立即再创建一个 promise 实例...如此循环，直到所有的 promise 都被创建并执行。

npm 上有很多库实现了此功能，个人觉得 tiny-async-pool 这个库比较好，因为它直接使用了原生的 Promise 实现了此功能，而其他库大多重新实现了 promise。其核心代码如下：

async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = []; // 用于存放所有的promise实例
  const executing = []; // 用于存放目前正在执行的promise
  for (const item of array) {
    const p = Promise.resolve(iteratorFn(item)); // 防止回调函数返回的不是promise，使用Promise.resolve进行包裹
    ret.push(p);
    if (poolLimit <= array.length) {
      // then回调中，当这个promise状态变为fulfilled后，将其从正在执行的promise列表executing中删除
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e);
      if (executing.length >= poolLimit) {
        // 一旦正在执行的promise列表数量等于限制数，就使用Promise.race等待某一个promise状态发生变更，
        // 状态变更后，就会执行上面then的回调，将该promise从executing中删除，
        // 然后再进入到下一次for循环，生成新的promise进行补充
        await Promise.race(executing);
      }
    }
  }
  return Promise.all(ret);
}

测试代码如下：

const timeout = (i) => {
  console.log('开始', i);
  return new Promise((resolve) => setTimeout(() => {
    resolve(i);
    console.log('结束', i);
  }, i));
};

(async () => {
    const res = await asyncPool(2, [1000, 5000, 3000, 2000], timeout);
    console.log(res);
  })();

代码的核心思路为：

  • 先初始化 limit 个 promise 实例，将它们放到 executing 数组中
  • 使用 Promise.race 等待这 limit 个 promise 实例的执行结果
  • 一旦某一个 promise 的状态发生变更，就将其从 executing 中删除，然后再执行循环生成新的 promise，放入executing 中
  • 重复2、3两个步骤，直到所有的 promise 都被执行完
  • 最后使用 Promise.all 返回所有 promise 实例的执行结果

到此这篇关于js Promise并发控制数量的方法的文章就介绍到这了,更多相关js Promise并发控制内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS异步代码单元测试之神奇的Promise

    前言 写这篇文章的起因是在写单元测试时,做形如下测试时 new Promise((resolve, reject) => reject(1)).then().catch(err => { console.log(err) }) async function jestTest () { await Promise.resolve().then() console.log('这个时候catch预期已经被调用,且输出日志') } jestTest() 无法使用await将测试代码恰好阻塞到catch

  • JS如何为promise增加abort功能

    目录 概述 promise race方法 重新包装promise AbortController  Axios插件自带取消功能 概述 Promise只有三种状态:pending.resolve.reject,一个异步的承诺一旦发出,经历等待(pending)后,最终只能为成功或者失败,中途无法取消(abort). 为promise提供abort功能的思路有两种: 手动实现abort,触发取消后,异步回来的数据直接丢弃(手动实现,比较稳妥) 使用原生方法AbortController中断请求(实验

  • Javascript异步编程之你真的懂Promise吗

    Javascript异步编程之你真的懂Promise吗

    前言 在异步编程中,Promise 扮演了举足轻重的角色,比传统的解决方案(回调函数和事件)更合理和更强大.可能有些小伙伴会有这样的疑问:2020年了,怎么还在谈论Promise?事实上,有些朋友对于这个几乎每天都在打交道的"老朋友",貌似全懂,但稍加深入就可能疑问百出,本文带大家深入理解这个熟悉的陌生人-- Promise. 基本用法 语法 new Promise( function(resolve, reject) {...} /* executor */ ) 构建 Promise

  • JavaScript使用promise处理多重复请求

    JavaScript使用promise处理多重复请求

    一.为什么要写这个文章? 处理重复请求的文章想必大家也看过了很多,大多数都是分为在response返回之前发现重复请求就return掉的和使用节流/防抖来间接规避用户频繁操作两种版本的.最近在使用的过程的中,发现这两个版本在某些场景下还是有些局限性. 二.问题场景 如图,我这个h5的页面,顶部和底部都要显示这个名片组件.这些名片的信息是通过一个接口来获取的,当这个组件在当前页面被初始化时,就会发生两次重复的请求. 这时会面临几个抉择: 1. 不对重复请求做任何处理. 缺点1:造成不必要的资源浪费

  • JavaScript如何利用Promise控制并发请求个数

    JavaScript如何利用Promise控制并发请求个数

    一.场景 假设现在有这么一种场景:现有 30 个异步请求需要发送,但由于某些原因,我们必须将同一时刻并发请求数量控制在 5 个以内,同时还要尽可能快速的拿到响应结果. 如图所示: 上图这样的排队和并发请求的场景基本类似,窗口只有三个,人超过三个之后,后面的人只能排队了. 二.串行和并行 串行:一个异步请求完了之后在进行下一个请求 并行:多个异步请求同时进行 串行举例: var p = function () { return new Promise(function (resolve, reje

  • 详解JavaScript Promise和Async/Await

    详解JavaScript Promise和Async/Await

    概述 一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应.因此,为了避免程序在请求时无响应的情况,异步编程就成为了开发人员的一项基本技能. 在JavaScript中处理异步操作时,通常我们经常会听到 "Promise "这个概念.但要理解它的工作原理及使用方法可能会比较抽象和难以理解. 四个示例 那么,在本文中我们将会通过实践的方式让你能更快速的理解它们的概念和用法,所以与许多传统干巴巴的教程都不同,我们将通过以下四个示例开始: 示例1:用生

  • JS异步堆栈追踪之为什么await胜过Promise

    概述 async/await和Promise的根本区别在于await fn()暂停当前函数的执行,而promise.then(fn)在将fn调用添加到回调链后,继续执行当前函数. const fn = () => console.log('hello') const a = async () => { await fn() // 暂停 fn 的执行 } // 调用 a 时,才恢复 fn 的执行 a() // "hello" const promise = Promise.r

  • JS 9个Promise面试题

    JS 9个Promise面试题

    1. 多个.catch var p = new Promise((resolve, reject) => { reject(Error('The Fails!')) }) p.catch(error => console.log(error.message)) p.catch(error => console.log(error.message)) 以上代码的输出将会是什么?请选择正确的答案: [ ] 打印一次消息 [x] 打印两次消息 [ ]UnhandledPromiseReject

  • 前端JavaScript之Promise

    前端JavaScript之Promise

    目录 1.什么是Promise 2.基本用法 3.Promise的方法 3.1 Promise.prototype.then() 3.2 Promise.prototype.catch() 3.3 Promise.prototype.finally() 3.4 Promise.all() 3.5 Promise.race() 3.6 Promise.allSettled() 3.7 Promise.any() 3.8 Promise.resolve() 3.9 Promise.reject()

  • js Promise并发控制数量的方法

    目录 问题 背景 思路 & 实现 问题 要求写一个方法控制 Promise 并发数量,如下: promiseConcurrencyLimit(limit, array, iteratorFn) limit 是同一时间执行的 promise 数量,array 是参数数组,iteratorFn 每个 promise 中执行的异步操作. 背景 开发中需要在多个promise处理完成后执行后置逻辑,通常使用Promise.all: Primise.all([p1, p2, p3]).then((res)

  • node.js Promise对象的使用方法实例分析

    本文实例讲述了node.js Promise对象的使用方法.分享给大家供大家参考,具体如下: Promise对象是干嘛用的? 将异步操作以同步操作的流程表达出来 一.Promise对象的定义 let flag = true; const hello = new Promise(function (resolve, reject) { if (false) {//异步操作成功 resolve("success"); } else { reject("error");

  • js简单实现表单中点击按钮动态增加输入框数量的方法

    js简单实现表单中点击按钮动态增加输入框数量的方法

    本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • JS简单限制textarea内输入字符数量的方法

    本文实例讲述了JS简单限制textarea内输入字符数量的方法.分享给大家供大家参考.具体如下: 这里演示JS限制一个area内的字符不能超过255,多余则截取. 代码如下: <script> function getStringUTFLength(str) { var value = str.replace(/[\u4e00-\u9fa5]/g," "); //将汉字替换为两个空格 return value.length; } function leftUTFString

  • js获取json元素数量的方法

    本文实例讲述了js获取json元素数量的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script> var keleyijson={"plug1":"myslider","plug2":"zonemenu","plug3":"javascript"} function JSONLength(obj) { var size = 0, key; for

  • JS二叉树的简单实现方法示例

    本文实例讲述了JS二叉树的简单实现方法.分享给大家供大家参考,具体如下: 今天学习了一下 二叉树的实现,在此记录一下 简单的二叉树实现,并且实现升序和降序排序输出 function Node(data , left,right){ this.data = data; this.left = left; this.right = right; this.show = show; function show(){ return this.data; } }; function Bst(){ this

  • JavaScript返回网页中超链接数量的方法

    本文实例讲述了JavaScript返回网页中超链接数量的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获取网页中的所有超级链接,从而获得超链接的数量 <!DOCTYPE html> <html> <body> <img src ="planets.gif" width="145" height="126" alt="Planets" usemap

  • JavaScript获取页面中超链接数量的方法

    JavaScript获取页面中超链接数量的方法

    本文实例讲述了JavaScript获取页面中超链接数量的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript取得页面的超链接数,感兴趣的朋友可以学习借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-total-link-num-codes/ 具体代码如下: <html> <head> <title>JavaScript取得页面的超链接数</title> <script l

  • JavaScript获取页面中表单（form）数量的方法

    本文实例讲述了JavaScript获取页面中表单(form)数量的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.forms数组获得网页中表单(form)的数量 <!DOCTYPE html> <html> <body> <h1>sharejs.com</h1> <form name="Form1"></form> <form name="Form2"

  • javascript Promise简单学习使用方法小结

    javascript Promise简单学习使用方法小结

    解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Promise交互的主要方式是通过他的then()方法来注册回调函数,去接收Promise的最终结果值 Promise相关的协议有PromiseA和PromiseA+ 定义一个类Promise 定义属性队列queue,初始化空数组[] 定义属性值value,初始化null 定义属性状态status,初始化"pending"(默认值) 定义成员方法getQueue(),返回属性queue 定义成员

随机推荐