前端如何做异步并发量的控制

需求来源

在小程序中，它规定了数据请求的并发量不超过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)

完整代码以及测试用例

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)
    });