实现一个批量请求函数, 能够限制并发量
<!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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix