JS如何实现一个并发请求控制函数并限制并发数

题目

假设有这么一个场景：现在有20个异步请求需要发送，但是由于HTTP客户端一般对同一个服务器的并发连接个数都是有限制的，比如chrome浏览器同一时刻最大并发数是6。

实现一个并发请求函数concurrencyRequest(urls, maxNum)，要求如下：

• 要求最大并发数 maxNum
• 每当有一个请求返回，就留下一个空位，可以增加新的请求
• 所有请求完成后，结果按照 urls 里面的顺序依次打出（发送请求的函数可以直接使用fetch即可）

测试代码

const urls = [];
for (let i = 1; i <= 20; i++) {
    urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
}
concurrencyRequest(urls, 3).then(res => {
    console.log(res);
})

具体实现

// 并发请求函数
const concurrencyRequest = (urls, maxNum) => {
   // 因为测试代码调用concurrencyRequest后需要返回一个Promise
    return new Promise((resolve) => {
    	 // urls的长度为0时，results就没有值，此时应该返回空数组
        if (urls.length === 0) {
            resolve([]);
            return;
        }
        const results = [];
        let index = 0; // 下一个请求的下标
        let count = 0; // 当前请求完成的数量

        // 发送请求
        async function request() {
            if (index === urls.length) return;
            const i = index; // 保存序号，使result和urls相对应
            const url = urls[index];
            index++;
            console.log(url);
            try {// 请求成功
                const res = await fetch(url);
                // resp 加入到results
                results[i] = res;
            } catch (err) {// 请求失败
                // err 加入到results
                results[i] = err;
            } finally {// 请求失败或成功都补一个新的请求进来
            	   // 请求完成计数器
                count++;
                // 判断是否所有的请求都已完成
                if (count === urls.length) {
                    console.log('完成了');
                    resolve(results);
                }
                // 
                request();
            }
        }

        //  maxNum大于urls的长度时，应该取的是urls的长度，否则则是取maxNum
        const times = Math.min(maxNum, urls.length);
        // 开启第一次批量调用
        for(let i = 0; i < times; i++) {
            request();
        }
    })
}

思路

• 首先按照每次只能并发3个请求的要求，这里就对应A、B、C，当其中有一个请求完之后就会再从urls里面再取出一个进行请求，这样依次类推，直到urls里面的20个请求都执行完才终止请求。
• urls的长度为0时，results就没有值，此时应该返回空数组
• maxNum大于urls的长度时，应该取的是urls的长度，否则则是取maxNum
• 需要单独定义一个count计数器来判断是否已全部请求完成；
• 因为没有考虑请求是否请求成功，所以请求成功或报错都应把结果保存在results集合中
• results中的顺序需和urls中的保持一致