javascript手写高并发控制

当页面需要批量发起请求时，为减轻服务器的负担，控制请求数量，是很好的解决思路。

如下图，客户端高并发N个请求，通过高并发控制器，将并发数量控制为M，当有其中一个请求处理完，则开始新的请求（fetch中的next()函数回调），直到所有的请求都处理完毕。

// 高并发控制函数
function multiRequest(urls, max) {
    const len = urls.length;
    const result = new Array(len).fill(false);
    let count = 0;
    return new Promise(resolve => {
        // 首次并发max个请求
        while (count < max) {
            next();
        }
        function next() {
            const cur = count++;
            if (cur > len) {
                // 如果所有的请求都返回结果，结束该函数，resolve虽有结果
                !result.includes(false) && resolve(result);
                return;
            }
            fetch(urls[cur]).then(res => {
                result[cur] = res;
                // 一个并发请求结束后，开始新的请求
                next();
            });
        }
    });
}
// Promise模拟接口异步请求
function fetch(url) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(url);
            resolve('data:' + url);
        }, 2000);
    });
}
// 高并发调用，
// 参数1：接口请求地址数组，
// 参数2：控制并发数量
multiRequest([
    'api/1',
    'api/2',
    'api/3',
    'api/4',
    'api/5',
    'api/6',
    'api/7',
    'api/8',
    'api/9'
], 3).then(result => {
    console.log('所有请求处理完毕');
    console.log(result);
});

输出结果：