JavaScript异步并发控制技巧分享

JavaScript异步并发控制的关键在于动态腾挪——任务完成一个才释放槽位、放行下一个，而非简单排队等待；文章系统梳理了从手动实现（Promise队列+计数器）、分批执行（async/await + Promise.all）、到生产级推荐方案（p-limit库）的多种实用方法，并强调了复用限流实例、透传错误、规避setTimeout误区及关注浏览器连接限制等关键避坑点，帮助开发者在高并发场景下既保障性能又避免资源耗尽或接口被限流。

控制 JavaScript 中的异步并发量，核心是限制同时执行的 Promise 数量，避免资源耗尽或接口限流被触发。关键不在于“排队”，而在于“动态腾挪”——已有任务完成一个，才放行下一个待执行任务。

使用 Promise 队列 + 计数器的手动调度

适合轻量、可控场景，逻辑清晰，便于调试。

• 维护一个待执行任务队列（数组）和当前运行中数量（counter）
• 每次调用执行函数时，若未超限则立即运行；否则入队等待
• 每个任务 resolve 后，检查队列：若有待办且未达并发上限，就取出一个执行

示例代码：

function createLimiter(max) {
  const queue = [];
  let running = 0;

  return function (task) {
    return new Promise((resolve, reject) => {
      const run = () => {
        running++;
        task()
          .then(resolve)
          .catch(reject)
          .finally(() => {
            running--;
            if (queue.length && running  () => fetch(url).then(r => r.json()));
const promises = tasks.map(task => limitFetch(task));
Promise.all(promises).then(console.log);

基于 async/await 的串行化封装（简化版并发控制）

当并发数为 1 时，本质是串行；但稍作扩展可支持固定并发数，更易读。

• 用 async 函数包装任务，内部维护一个“许可槽位”数组（长度 = max）
• 每次执行前 await 获取一个空闲槽位（可用 Promise.race + 空闲标识）
• 任务结束后释放该槽位（如 resolve 对应的 Promise）

实际中更推荐使用成熟的 Promise.allSettled + 分批执行 方式，逻辑更直白：

async function mapLimit(array, max, mapper) {
  const results = [];
  for (let i = 0; i  mapper(item));
    results.push(...await Promise.all(batch));
  }
  return results;
}

// 每次最多 4 个并发请求
const data = await mapLimit(urls, 4, url => fetch(url).then(r => r.json()));

使用 p-limit 库（生产推荐）

社区成熟方案，处理边界严谨（如错误传播、取消信号、高负载稳定性）。

• 安装：npm install p-limit
• 创建 limiter 实例，调用 limit(fn) 包裹异步函数
• 自动管理队列、重试、拒绝传递，支持 AbortSignal（v3+）

import pLimit from 'p-limit';

const limit = pLimit(5); // 最大 5 个并发

const inputs = urls.map(url =>
  limit(() => fetch(url).then(r => r.json()))
);

const results = await Promise.all(inputs);

注意点与避坑提醒

并发控制不是万能解药，需结合业务权衡：

• 别在循环里反复创建 limiter：应复用同一实例，否则队列隔离，失去限流意义
• 错误处理要透传：手动实现时，reject 必须触发后续调度，否则队列会卡死
• 慎用 setTimeout 模拟节流：它不控制并发，只延迟，无法防止瞬间大量 pending Promise 创建
• 浏览器环境注意 fetch 连接数限制：Chrome 对同一域名默认最大 6 个 HTTP/1.1 连接，HTTP/2 有所缓解但仍有内核约束

今天关于《JavaScript异步并发控制技巧分享》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！