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

如下图,客户端高并发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);
});

输出结果:
在这里插入图片描述

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐