<!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> 原文链接：关于前端：如何实现并发请求数量控制？ - 掘金 (juejin.cn)
标签：const,请求,批量,res,results,next,并发,urls From： https://www.cnblogs.com/shidawang/p/17182861.html