本文详解如何正确实现一个支持最大并发数限制、请求完成即自动发起下一轮的异步请求队列，避免因同步阻塞导致的无限循环和 promise 回调永不执行问题。
在前端开发中，批量请求接口时若不加控制，可能瞬间发起大量网络请求，造成服务端压力激增或客户端资源耗尽。理想方案是：限定同时进行的请求数量（如最多 3 个），任一请求完成即立即用下一个待处理 endpoint 补位，保持并发数稳定，直至全部处理完毕。
但初学者常误用同步循环 + 异步 Promise 的混合逻辑，导致严重问题。例如原代码中：
const requestQueue = (endpoints, callback, limit = 3) => {
while (endpoints.length > 0) {
if (limit > 0) {
const slice = endpoints.splice(0, limit);
for (const endpoint of slice) {
limit--; // ⚠️ 同步递减至 0
fetchMock(endpoint)
.then(data => callback(data))
.catch(err => callback(err))
.finally(() => limit++); // ❌ 永远不会执行！
}
}
}
};该逻辑存在根本性错误：
- while 是纯同步循环，会持续占用主线程；
- fetchMock(...).finally(...) 中的回调属于 microtask，必须等待当前同步栈清空后才执行；
- 但 while 循环永不停止（因 limit 变为 0 后不再进入 if 块，endpoints 却未被清空），导致事件循环无法推进 → 所有 Promise 回调被永久挂起，形成死锁。
✅ 正确解法是完全基于异步驱动、状态驱动，摒弃同步循环，改用递归 + 闭包状态管理：
✅ 推荐实现：并发可控的自动续发队列
function requestQueue(endpoints, callback, limit = 3) {
const queue = [...endpoints]; // 保护原始数组
let activeCount = 0;
function dispatch() {
// 当前并发未达上限 且 队列非空，才发起新请求
while (activeCount < limit && queue.length > 0) {
activeCount++;
const endpoint = queue.shift();
fetchMock(endpoint)
.then(data => callback(null, data)) // 推荐区分 success/error
.catch(err => callback(err, null))
.finally(() => {
activeCount--;
// 完成后立即尝试续发（无需等待，充分利用空闲 slot）
if (queue.length > 0 && activeCount < limit) {
dispatch();
}
});
}
}
dispatch(); // 启动首批请求
}? 关键设计说明：
- 无全局变量：activeCount 和 queue 封装在闭包内，线程安全；
- 主动调度：每次 finally 触发后，检查是否可继续派发，而非依赖定时轮询；
- 精准限流：activeCount 实时反映真实并发数，dispatch() 内部 while 确保一次最多补满 limit 个；
- 错误友好：callback(err, data) 显式分离错误与成功路径，便于业务侧统一处理。
? 示例测试（含模拟延迟）：
function fetchMock(endpoint) {
return new Promise(resolve =>
setTimeout(() => resolve(`result_${endpoint}`),
Math.random() * 2000 + 500) // 500–2500ms 随机延迟
);
}
// 发起 5 个请求，最大并发 2
requestQueue([1, 2, 3, 4, 5], (err, data) => {
if (err) console.error('Request failed:', err);
else console.log('Success:', data);
});
// 输出顺序示例（体现并发与续发）：
// Success: result_1
// Success: result_2
// Success: result_3 ← 1 完成后立即发出
// Success: result_4 ← 2 完成后立即发出
// Success: result_5 ← 3 完成后立即发出⚠️ 注意事项：
- 避免修改传入的 endpoints 原数组（使用 slice() 或展开语法复制）；
- 不要将 limit 设为 0 或负数，应增加参数校验；
- 若需支持取消、超时、重试等高级能力，建议封装为 Class 或集成 p-limit 等成熟库；
- 在真实项目中，fetchMock 应替换为 fetch 或 axios，并添加鉴权、错误重试等逻辑。
掌握这种“异步驱动 + 状态守卫”的模式，是构建健壮前端请求调度系统的基础。它不仅解决限流问题，更体现了对 JavaScript 事件循环本质的深刻理解。
