前端并发请求控制：实现方案完整梳理

在前端开发中，往往需要一次性发送成百上千个网络请求。若不做并发控制，短时间内同时抛出的几十甚至上百个请求会导致以下痛点：

• 浏览器同源并发数被超限，出现排队阻塞。
• 后端服务器承受巨大压力，甚至触发接口限流或宕机。
• 慢请求拖累整批执行，导致资源闲置。
• 结果顺序难以保证，业务逻辑变得复杂。

对请求做并发限流已成为业务中少不了的需求。下面整理了几种主流的实现方案，包含原理说明、优缺点还有可直接运行的示例代码。

1️⃣ 分批批量执行

原理

将请求地址数组按最大并发数切割成若干小分片。每个分片内部使用 Promise.all 并行执行，必须等当前分片所有请求完成后才启动下一批。这种方式简单易懂，但如果某个请求特别慢，会拖累整批完成时间。

// batchRequest.js
/**
* @param {string} urls 请求地址数组
* @param {number} limit 每批最大并发数
*/
async function batchRequest {
const result =;说起来，for {
const chunk = urls.slice;const chunkRes = await Promise.all(
chunk.map.n))
);按理说，result.push;}
return result;}
// 示例调用
const urls = Array.from => `https://api.example.com/${i}`);batchRequest.n);其实，

优缺点对比

• 优点：  实现简单。易于维护，适用于任务耗时均匀的小规模场景。
• 缺点：  慢请求会阻塞整个分片；窗口空闲浪费，老实说，不适合大规模高变异任务。

2️⃣ Promise.race 滑动窗口动态补位

原理

初始化固定数量的并发任务，并通过 Promise.race 等待任意一个完成后立即补充新任务。这样可以始终保持指定并发数，无论有无慢请求，都能高效利用网络资源。此思路即是 p‑limit 库的主要设计。

// slidingWindow.js
/**
* @param {string} urlList 请求地址数组
* @param {number} limit 最大并发数
*/
async function concurrencyRequest {
const results =;// 初始窗口
const promises = urlList.slice.map =>
fetch
.n)
.n)
);let cursor = limit;while {
// 等待任意一个完成
const { data,idx } = await Promise.race;results = data;// 移除已完成 promise
const finishIndex = promises.findIndex(p =>
p.n?.，== undefined // 简化查找方式
);怎么说呢，promises.splice;// 有剩余任务则补充到窗口
if {
const newUrl = urlList;const newP = fetch
.n)
.n);promises.push;}
}
return results;}
// 示例调用
const urls = Array.from => `/api/${i}`);concurrencyRequest.n;说起来，

优缺点对比

• 优点：  动态补位。高效利用资源，适合任务耗时差异大的场景。怎么说呢，
• 缺点：  实现稍显复杂。需要维护索引以保证结果顺序；错误处理相对繁琐，话说回来，

3️⃣ 信号量 Semaphore

原理

Sema‑phore是一种通用异步调度工具。用于限制同时运行的任务数量。它维护一个许可计数器，当计数器已满时新来的任务进入等待队列；当已有任务完成后释放许可，唤醒下一个等待者。

// semaphore.js
class Semaphore {
constructor {
this.max = max;this.current = max;this.waitQueue =;}
async acquire {
if {
this.current--;return Promise.resolve;}
return new Promise);}
release {
this.current++;if {
this.current--;const nextResolve = this.waitQueue.shift;nextResolve，}
}
async run {
await this.acquire;
try {
return await taskFn;} finally {
this.release;}
}
}
// 使用示例
const sem = new Semaphore;// 最多三条并行
async function demo {
const urls =;const tasks = urls.map(url =>
sem.run => ).json
));怎么说呢，const results = await Promise.all;console.log，}
demo;

优缺点对比

• 优点：  通用模型。可限制任何异步操作，不仅限于网络请求；实例可复用，多处共享同一限制规则。
• 缺点：  需要自行实现错误恢复、取消等高级特性；编码量略大，

4️⃣ 成熟库 p‑limit

P‑limit 是基于信号量实现的成熟第三方库。可直接满足生产环境中的多种边界需求，如异常捕获、队列监控和取消功能。推荐在项目中使用而非自行重写调度器。

安装与使用示例

// 安装：npm install p-limit

import pLimit from 'p-limit';

const limitConcurrencyNum=5;const limiter= pLimit;

const urls=Array.from=>https://api.example.com/${i});

// 将所有异步任务交给 limiter 执行，每次最多同时执行5条 const promises=urls.map=>fetch.n)));

Promise.all .n) .catch);

5️⃣ 手写请求队列

此方案通过维护一个活跃计数和等待队列来控制并发。当活跃数量低于阈值时立即执行新任务，否则将其放入队列。在下一个槽位释放时自动取出下一个任务执行。该方法最适合学习和快速原型，但在生产环境建议使用更健壮的库或信号量模式以处理异常和取消等边界情况。

// queue.js

const MAXCONCURRENTREQUESTS=5;let activeCount=0;const requestQueue=;

// 接收任意 async 函数 taskFn 并返回其 Promise function runTask{ return new Promise=>{ const task=async =>{ try{ activeCount++;const res=await taskFn;resolve，}catch{reject} finally{ activeCount--;if{ requestQueue.shift;怎么说呢，// 执行下一个排队任务 } } };if{ task，}else{ requestQueue.push;} })，}

// 示例： runTask=>fetch.n));runTask=>fetch.n));// 可继续添加更多，…

各方案横向对比表格

方案名称 技术要点	主要特点	适用场景 & 建议
# 分批 + Promise.all #		小规模、高均衡耗时且不关心实时率，可快速 prototyping。但慢请求会拖延整个批次应避免大规模混杂耗时差异明显的数据拉取。
# Promise.race 滑动窗口 #		资源利用率高。对耗时差异敏感但实现略复杂，需要维护索引保证顺序。适合大数据拉取或文件上传下载等需求。说起来，
# 信号量 Semaphore #		通用模型。不仅可控制 fetch，还能限制任何 async 函数；实例可复用，是建立自定义调度器的底层骨架。适合需要多处共享相同并行阈值的大型项目。
# p‑limit 库 #		工业级方法，具备完整错误捕获、超时与取消功能；易于集成且性能稳定，是业务项目首选。仅需一次 npm 安装即可投入生产。
# 手写队列 #		教学与实验用途最佳，可以彻底理解背后逻辑。但若未完善异常与取消机制，在真实项目中容易产生 bug。建议仅用于学习或小型脚本验证。
⚛

注意不同浏览器同源最大连接数可能略有差别。一般为 6~8，请根据实际情况调整 limit 值。

* 如果你只需要快速 prototyping 且数据耗时相近 → 分批 + Promise.all * 想让吞吐率最大化 → Promise.race 滑动窗口 或 Semaphore * 在正式业务里追求稳定可靠 → p‑limit * 想内部工作原理 → 手写队列 / 信号量

祝你在前端网络编程路上越跑越快 🚀

---