在前端会遇到需求:例如,有100个接口需要请求,但是同时发送会导致崩溃,所以需要控制同一时刻下的请求数量在3个值。
并发请求的数量控制——js实现
const limitRequest = (urls, maxNum) => {
return new Promise((resolve) => {
if (urls.length === 0) {
resolve([]);
return
}
// 定义数组记录每次请求的结果(无论成功失败)
const results = []
let index = 0;
let cnt = 0;
// 发送请求
async function request() {
if (index === urls.length) return;
const i = index;
const url = urls[i];
index++;
console.log(url);
try {
const response = await fetch(url);
results[i] = response;
} catch (err) {
results[i] = err;
} finally {
cnt++;
// 判断是否请求都完成
if (cnt === urls.length) {
console.log('所有请求已完成')
resolve(results)
}
request()
}
}
// maxNum和urls.length取最小进行调用
// 将异步的并发数控制在,同一时间请求times次
const times = Math.min(maxNum, urls.length);
for (let i = 0; i < times; i++) {
request()
}
})
}
// 测试数据
const urls = [];
for (let i = 1; i <= 100; i++) {
urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`)
}
limitRequest(urls, 3).then(res => {
console.log(res)
})
完成效果:同一时刻是3个请求在并发。