实现一个批量请求函数, 能够限制并发量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="begin()">按钮</button>
<script>
// 并发请求函数
function func(urls, maxNum) {
return new Promise((resolve) => {
if (urls.length === 0) {
resolve([]);
return;
}
const results = [];
let next = 0; // 下一个请求的下标
let finishedNum = 0; // 当前请求完成的数量
// 发送请求
async function request() {
if (next === urls.length) return;
const i = next; // 保存序号，使result和urls相对应
const url = urls[next]; //url只能在try外面获取，await fetch(urls[next])的方式会带来bug
next++;
try {
const res = await fetch(url);
// res 加入到results
results[i] = res;
} catch (err) {
// err 加入到results
results[i] = err;
} finally {
finishedNum++;
// 判断是否所有的请求都已完成
if (finishedNum === urls.length) {
resolve(results);
}
request(); //递归调用
}
}
// maxNum和urls.length取最小进行调用
const num = Math.min(maxNum, urls.length);
// 每次发起num数量的请求
for (let i = 0; i < num; i++) {
request();
}
});
}
// 测试代码如下：
function begin() {
const urls = [];
for (let i = 0; i <= 20; i++) {
urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
}
func(urls, 3).then((res) => {
console.log("请求结果：", res);
});
}
</script>
</body>
</html>
