这是我参与8月更文挑战的第19天,活动详情查看:8月更文挑战
问题场景
Promise.all 在跑异步的时候是全部并发同时处理的。这样对一些大量的xhr请求 对服务器压力太大会无法响应请求
需求
同时并发指定的数量(1个或者多个)后,不再增加,除非有进程结束后,从promise任务中按照顺序启动新的异步任务
过程
使用前
使用插件限制并发为5个后
只有指定数量的任务结束,才会启动新的任务
插件说明
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)
参数 | 作用 |
---|---|
promiseArr | promise 对象组成的数组 |
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)
- 更新
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)
})