js 异步队列的并发控制 ,推荐一个好用的插件包 js-asyncpool

909 阅读2分钟

这是我参与8月更文挑战的第19天,活动详情查看:8月更文挑战

问题场景

Promise.all 在跑异步的时候是全部并发同时处理的。这样对一些大量的xhr请求 对服务器压力太大会无法响应请求

需求

同时并发指定的数量(1个或者多个)后,不再增加,除非有进程结束后,从promise任务中按照顺序启动新的异步任务

过程

使用前

image.png

使用插件限制并发为5个后

image.png

image.png

只有指定数量的任务结束,才会启动新的任务

image.png

插件说明

npm 地址:www.npmjs.com/package/js-…

说明

同Promise.all 一样,实际上是一个函数,它接受一个 promises 数组并返回一个 Promise,并可以限制同时并发异步的数量

0. 安装
npm i js-asyncpool --save
1. 引入
import jsAsyncPool from 'js-asyncpool'

2. 参数说明

jsAsyncPool.asyncPool(promiseArr,limit)

参数作用
promiseArrpromise 对象组成的数组
limit可同时并发几个,以此类推
3. 例子
import jsAsyncPool from 'js-asyncpool'

let arr = []
function createPromise (j) {
  return ()=>{
    return new Promise(resolve => {
      console.log(`promise${j} start`);
      setTimeout(() => {
        console.log(`promise${j} over------`);
        resolve();
      }, 3000);
    })
  }
}

arr.push(createPromise(1))
arr.push(createPromise(2))
arr.push(createPromise(3))
arr.push(createPromise(4))
arr.push(createPromise(5))
arr.push(createPromise(6))
arr.push(createPromise(7))
console.log(arr,'----arr')
jsAsyncPool.asyncPool(arr,3)


  1. 更新
npm update js-asyncpool

相关知识点

一、Pomise.all的使用

常见使用场景 : 多个异步结果合并到一起

Promise.all可以将多个Promise实例包装成一个新的Promise实例。用于将多个Promise实例,包装成一个新的Promise实例。

1.它接受一个数组作为参数。

2.数组可以是Promise对象,也可以是其它值,只有Promise会等待状态改变。

3.当所有的子Promise都完成,该Promise完成,返回值是全部值的数组。

4.如果有任何一个失败,该Promise失败,返回值是第一个失败的子Promise的结果。

代码例子

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了,打出 '失败'
})
二、Promise.race的使用

类似于Promise.all() ,区别在于 它有任意一个返回成功后,就算完成,但是 进程不会立即停止

常见使用场景:把异步操作和定时器放到一起,如果定时器先触发,认为超时,告知用户

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功了')
  }, 2000);
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')    
  }, 5000);
})


Promise.race([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})