首页 > 文章 > 前端

JavaScript并发控制技巧详解

时间：2025-11-02 17:09:31 346浏览收藏

**JavaScript并发控制方法解析：提升程序健壮性的关键** 在JavaScript开发中，并发控制是优化性能和避免资源过载的重要手段。由于JavaScript是单线程的，并发控制主要指对异步任务的协调与调度。本文深入解析JavaScript中实现并发控制的几种常见方法，包括手动使用Promise维护队列和活跃任务数、利用async/await结合Promise.race实现简化控制，以及借助p-limit等第三方库。通过限制同时执行的任务数量，例如批量上传、爬虫抓取等场景，可以有效防止浏览器阻塞、服务端压力过大或触发接口限流。掌握这些并发控制技巧，能显著提升JavaScript程序的稳定性和用户体验。

JavaScript中通过限制异步任务并发数避免资源过载，常用方法包括：1. 手动用Promise维护队列和活跃任务数；2. 用async/await结合Promise.race实现简化控制；3. 使用p-limit等第三方库。

JavaScript并发控制模式

JavaScript中的并发控制主要用于限制同时执行的任务数量，避免资源过载或接口限流。由于JavaScript是单线程语言，所谓的“并发”更多是指异步任务的协调与调度，特别是在处理大量Promise或异步请求时，合理的控制机制能提升稳定性和性能。

1. 并发控制的基本场景

当你需要发起100个HTTP请求时，如果全部同时发出，可能造成浏览器阻塞、服务端压力过大或触发限流策略。理想做法是只允许固定数量（如5个）请求同时进行，完成一个后再发起下一个。

常见应用场景包括：

批量上传或下载文件
爬虫抓取多个页面
定时轮询多个接口
资源密集型计算任务调度

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

通过维护一个任务队列和活跃任务数，可以手动控制并发。核心思路是：当活跃任务少于最大并发数时，从队列中取出任务执行。

function concurrencyControl(tasks, maxConcurrent) {
  let index = 0;
  let activeCount = 0;
  let resolvedCount = 0;
  const results = Array(tasks.length);

  return new Promise((resolve) => {
    function next() {
      if (index >= tasks.length && activeCount === 0) {
        resolve(results);
        return;
      }

      while (activeCount  {
            results[i] = { status: 'fulfilled', value: res };
          })
          .catch((err) => {
            results[i] = { status: 'rejected', reason: err };
          })
          .finally(() => {
            activeCount--;
            next();
          });
      }
    }
    next();
  });
}

使用方式：

const tasks = Array(10).fill().map((_, i) => () =>
  fetch(`/api/data/${i}`).then(res => res.json())
);

concurrencyControl(tasks, 3).then(results => {
  console.log('所有任务完成:', results);
});

3. 基于async/await的简化实现

利用async函数和递归调用，可以让逻辑更清晰。

async function runWithLimit(tasks, limit) {
  const results = [];
  const executing = [];

  for (const task of tasks) {
    const p = task().then(res => {
      results.push(res);
      return res;
    });
    
    executing.push(p);

    if (executing.length >= limit) {
      await Promise.race(executing); // 等待任意一个完成
      executing.splice(executing.indexOf(p), 1);
    }
  }

  await Promise.all(executing); // 等待剩余任务
  return results;
}

这个版本使用Promise.race来释放已完成的任务槽位，适合对顺序要求不高的场景。

4. 使用第三方库（如p-limit）

实际项目中推荐使用成熟库，例如 p-limit，简洁且经过充分测试。

import pLimit from 'p-limit';

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

const promises = urls.map(url =>
  limit(() => fetch(url).then(r => r.text()))
);

const results = await Promise.all(promises);

它内部实现了高效的调度逻辑，支持错误传播和取消操作，适合生产环境。

基本上就这些常见的并发控制模式。关键在于理解任务调度机制，根据场景选择手动实现或使用工具库。不复杂但容易忽略细节，比如错误处理和结果顺序。合理控制并发能显著提升程序健壮性。

理论要掌握，实操不能落！以上关于《JavaScript并发控制技巧详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！