本文详解如何安全地控制 http 请求的并发数量，指出原始代码因同步阻塞与异步回调执行时机错位导致无限循环的根本原因，并提供基于 promise 协调、无状态、可复用的限流请求队列实现。
在前端开发中，对大量接口进行串行或可控并发请求是常见需求（例如批量拉取用户数据、分页预加载等）。一个直观但危险的想法是：用 while 循环 + splice 切片 + 同步递减 limit 变量来“控制并发”。然而，正如示例代码所示，这种写法会立即陷入无限同步循环，浏览器卡死，控制台无任何输出——根本原因在于混淆了 JavaScript 的事件循环机制与同步/异步执行边界。
? 问题根源剖析
原始代码的关键错误有两点：
同步逻辑阻塞异步回调执行
while (endpoints.length > 0) 是纯同步循环，它永远不会让出主线程；而 fetchMock().then().catch().finally() 中的所有回调均属于 microtask，必须等待当前同步任务栈清空后才被调度。因此 limit++ 永远不会执行，limit 一旦归零便再无法恢复，if (limit > 0) 永远为 false，while 循环永不退出。共享可变状态引发竞态
limit-- 和 limit++ 在多个异步回调中并发修改同一变量，缺乏原子性保障，即使绕过死循环，结果也难以预测。
✅ 正确解法：基于 Promise 并发控制的队列模型
我们应放弃“手动维护计数器 + 同步轮询”的思路，转而采用函数式、声明式、基于 Promise 状态流转的设计。核心思想是：
- 维护一个「运行中请求数」计数器（局部、受控）；
- 每次仅在有余量时发起新请求；
- 请求完成（无论成功或失败）后立即检查是否可发起下一个。
以下是一个健壮、无副作用、支持任意 limit 值的实现：
/**
* 限制并发数的请求队列
* @param {string[]} endpoints - 接口 URL 或标识符数组
* @param {(data: any) => void} callback - 处理每个响应的回调
* @param {number} [limit=3] - 最大并发请求数
*/
const requestQueue = (endpoints, callback, limit = 3) => {
let activeCount = 0; // 当前活跃请求数
let index = 0; // 下一个待请求的索引
const execute = () => {
// 若已处理完所有 endpoint，或已达并发上限，则暂停
if (index >= endpoints.length || activeCount >= limit) return;
const endpoint = endpoints[index++];
activeCount++;
fetchMock(endpoint)
.then(data => callback(data))
.catch(err => callback(err))
.finally(() => {
activeCount--;
// 立即尝试发起下一次请求（不需 setTimeout，直接递归）
execute();
});
};
// 初始启动：填充至达到 limit 或耗尽 endpoints
for (let i = 0; i < limit && index < endpoints.length; i++) {
execute();
}
};
// 模拟请求（带随机延迟，便于观察并发效果）
function fetchMock(endpoint) {
const delay = Math.floor(Math.random() * 3000) + 1000; // 1–4s
return new Promise(resolve =>
setTimeout(() => resolve(`Response from ${endpoint}`), delay)
);
}
// 使用示例
requestQueue(['api/user/1', 'api/user/2', 'api/user/3', 'api/user/4', 'api/user/5'],
data => console.log('✅', data));? 关键设计亮点
- ✅ 无全局状态：activeCount 和 index 封装在闭包内，每次调用 requestQueue 都是独立实例；
- ✅ 自然节流：execute() 在 finally 中递归调用，确保仅当有空闲槽位且仍有任务时才继续，完全规避竞态；
- ✅ 错误免疫：catch 确保异常不影响队列流程；finally 保证计数器必然回退；
- ✅ 零依赖 & 易测试：不依赖外部库，fetchMock 可轻松替换为真实 fetch 或 axios。
⚠️ 注意事项与进阶建议
- 若需支持取消请求，可引入 AbortController，并在 finally 中清理信号；
- 对于需要严格顺序输出的场景（如按原数组顺序打印），应在 callback 中附加索引信息，而非依赖执行顺序；
- 生产环境建议增加超时控制（如 Promise.race([fetch(), timeout()])）和重试机制；
- 更复杂的调度需求（如优先级、权重、动态限流）可考虑使用 p-limit（轻量）、p-queue 或 RxJS 的 mergeMap 操作符。
掌握这一模式，你将能可靠地驾驭任意规模的接口批处理任务——不再被死循环困扰，真正让异步逻辑为你所用。
