前端做异步并发量的控制解析

需求来源

在小程序中，它规定了数据请求的并发量不超过10个，那么在代码层面，我们如何避免这种情况的出现呢？

设计思路

设计思路其实很简单，假如并发量控制是 5

1，首先，瞬发 5 个异步请求，我们就得到了并发的 5 个异步请求

// limit = 5
while(limit–) {
handleFunction(list)
}
2，然后，等每个异步请求执行完，执行下一个list项

let recursion = (arr) => {
return asyncHandle(arr.shift())
.then(()=>{
// 迭代数组长度不为0， 递归执行自身
if (arr.length!==0) return recursion(arr)
// 迭代数组长度为0，结束
else return ‘finish’;
})
}
3，等list所有的项迭代完之后的回调

return Promise.all(allHandle)
1

完整代码以及测试用例

const mapLimit = (list, limit, asyncHandle) => {
const recursion = (arr) => {
return asyncHandle(arr.shift()).then((res) => {
console.log(‘data’, res);
if (arr.length > 0) {
return recursion(arr)
}
return ‘finish’
})
}
let asyncList = [];
let listCopy = [].concat(list);
while (limit–) {
asyncList.push(recursion(listCopy))
}
return Promise.all(asyncList);
}

var dataLists = [1,2,3,4,5,6,7,8,9,11,100,123];
var count = 0;
mapLimit(dataLists, 3, (curItem)=>{
    return new Promise(resolve => {
        count++
        setTimeout(()=>{
            console.log(curItem, '当前并发量:', count--)
            resolve();
        }, Math.random() * 5000)
    });
}).then(response => {
    console.log('finish', response)
});