请实现如下函数,可以批量请求数据,所在的url地址在urls参数中,同时可以通过max参数来控制请求并发量,当所有请求结束后,需要执行callback回调函数。发请求的函数可直接使用fetch即可
/**
* 并发请求控制
*
* @export
* @param {string<Array>} urls
* @param {number} max
* @param {function} callback
*/
export function sendRequest(urls, max, callback) {
const REQUEST_MAX = max; // 并发数量
const TOTAL_REQUESTS_NUM = urls.length; // 请求数量
const blockQueue = []; // 等待排队的那个队列
let currentReqNumber = 0; // 现在请求的数量是
let numberOfRequestsDone = 0; // 已经请求完毕的数量是
const results = new Array(TOTAL_REQUESTS_NUM).fill(false); // 所有请求的返回结果,先初始化上
async function init() {
// {1}
for (let i = 0; i < urls.length; i++) {
console.log("现在i是: " + i + " 正请求:" + urls[i]);
request(i, urls[i]);
}
}
async function request(index, reqUrl) {
// 这个index传过来就是为了对应好哪个请求,
// 放在对应的results数组对应位置上的,保持顺序
// {2} 大于并发量去进行阻塞
if (currentReqNumber >= REQUEST_MAX) {
console.log(
"currentReqNumber: " + currentReqNumber +
" ----REQUEST_MAX : " + REQUEST_MAX +
" ---- url: " + reqUrl);
// {3} 阻塞队列增加一个 Pending 状态的 Promise,
await new Promise((resolve) => blockQueue.push(resolve));
// 进里面排队去吧,不放你出来,不resolve你,你就别想进行下面的请求
console.log("第" + index + "个请求等待结束: 即将开始执行:" + reqUrl);
}
reqHandler(index, reqUrl); // {4}
}
async function reqHandler(index, reqUrl) {
currentReqNumber++; // {5} 开始请求,请求数自增
try {
const result = await fetch(reqUrl);
results[index] = result;
} catch (err) {
results[index] = err;
} finally {
currentReqNumber--; // 请求完成,请求数自减
numberOfRequestsDone++;
console.log("完成请求的链接: " + reqUrl + ", 当前请求的数量: " + currentReqNumber + "阻塞队列数量:" + blockQueue.length);
if (blockQueue.length) {
// 每完成一个就从阻塞队列里剔除一个
// 将最先进入阻塞队列的 Promise 从 Pending 变为 Fulfilled
blockQueue[0]();
blockQueue.shift();
console.log("消灭一个blockQueue第一个阻塞后,排队数为 : " + blockQueue.length);
}
if (numberOfRequestsDone === TOTAL_REQUESTS_NUM) {
callback(results);
}
}
}
init();
}