现代JavaScript_Promise并发控制-js教程-PHP中文网

现代JavaScript_Promise并发控制

betcha

发布： 2025-11-22 16:21:05

原创

699人浏览过

Promise并发控制指限制同时执行的异步任务数量，通过维护运行中任务数不超过上限，实现效率与稳定性的平衡，常用于批量请求场景。

现代javascript_promise并发控制

在现代JavaScript开发中，处理异步操作是日常任务。当需要同时发起多个Promise请求时，如果不加控制地并发执行，可能造成资源竞争、服务器压力过大或浏览器卡顿。因此，实现Promise的并发控制变得非常关键。它能在保证效率的同时，避免系统过载。

什么是Promise并发控制

Promise并发控制指的是：在多个异步任务中，限制同时运行的任务数量，例如只允许最多3个请求同时进行。当其中一个完成，再从队列中取出下一个任务执行。这种方式既提升了性能，又避免了无节制的并行请求。

常见的场景包括：

批量上传文件
爬取多个页面数据
调用第三方API接口（有频率限制）

使用Promise + 队列实现并发控制

核心思路是维护一个正在执行的任务数组和一个待执行的任务队列。每当有任务完成，自动从队列中取出下一个任务执行，始终保持运行中的任务数不超过设定上限。

立即学习“Java免费学习笔记（深入）”；

示例代码：

function limitConcurrency(tasks, maxConcurrent) {
  const results = [];
  let index = 0;
  let completed = 0;
  let running = 0;

  return new Promise((resolve, reject) => {
    function runNext() {
      if (index >= tasks.length && running === 0) {
        resolve(results);
        return;
      }

      while (running < maxConcurrent && index < tasks.length) {
        const currentIndex = index;
        const task = tasks[index++];
        running++;

        task()
        .then(result => {
          results[currentIndex] = result;
        })
        .catch(err => {
          results[currentIndex] = err;
        })
        .finally(() => {
          running--;
          completed++;
          runNext();
        });
      }
    }

    runNext();
  });
}

登录后复制

使用方式：

const tasks = [
  () => fetch('/api/1').then(r => r.json()),
  () => fetch('/api/2').then(r => r.json()),
  () => fetch('/api/3').then(r => r.json()),
  // 更多任务...
];

limitConcurrency(tasks, 3).then(results => {
  console.log('所有结果:', results);
});

登录后复制

借助第三方库简化实现

如果你不想手动管理队列逻辑，可以使用成熟的工具库，比如 p-limit。

安装：

Latte

发现视频中最吸引人的部分并制作

查看详情

npm install p-limit

使用示例：

import pLimit from 'p-limit';

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

const promises = [
  limit(() => fetch('/api/1').then(r => r.json())),
  limit(() => fetch('/api/2').then(r => r.json())),
  limit(() => fetch('/api/3').then(r => r.json()))
];

Promise.all(promises).then(results => {
  console.log('结果:', results);
});

登录后复制

这种写法简洁清晰，limit() 会自动排队执行，超出并发数的任务会等待。