如何实现并发请求限流与自动续发的队列机制_技术教程

本文详解如何正确实现一个支持最大并发数限制、请求完成即自动发起下一轮的异步请求队列，避免因同步阻塞导致的无限循环和 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 完成后立即发出