怎么说呢，

前言

一、为什么要给请求 “限速”？

使用者痛点：

• 页面卡顿，关键内容迟迟不出现；
• 接口频繁超时报错信息充斥控制台；
• 带宽被少数大文件占满，导致其他请求被迫排队甚至失败。

上了这么多年网。一定都经历过以下画面：

• 打开电商详情页，一堆商品图片、评论、推荐接口同时发起，页面半天加载不出来。
• 某个大文件上传时其他小请求直接超时失败。
• 浏览器控制台里一片红色的 net::ERR_CONNECTION_RESET。

这本质上就是并发请求过多。带宽被“挤爆”就像早高峰的地铁——大家都想上车，却谁也动不了。

前端控制并发，就是给这些请求当“交通警察”：

• 规定同一时间最多只能有 N 辆车在路上；
• 剩下的车乖乖在停车场排队；
• 等路上的车到站，再放一辆进去。

这样既能避免服务器和带宽过载，又能保证所有请求最终都能被处理。

二、先造个 “模拟请求”：让请求有快有慢

我们先写一个模拟的异步请求函数 ajax用 setTimeout 模拟网络延迟。超过 5000ms 就直接 “请求失败”。

function ajax {
return new Promise => {
setTimeout => {
if {
reject;话说回来，} else {
resolve;}
},time)，});}

三、主要工具：并发控制器 Limit 类

The star of show – 并发控制器 Limit. 它负责管理所有请求的“上路权限”。

class Limit {
/**
* @param {number} parallCount - 最大并发数
*/
constructor {
this.tasks =;老实说，// 任务队列：存还没上路的请求
this.runningCount = 0;// 当前正在跑的请求数
this.parallCount = parallCount;// 最大并发数
}
// 添加任务到队列
add {
return new Promise => {
this.tasks.push;this._run，// 尝试启动任务
});话说回来，}
// 私有调度器：决定何时放新任务上路
_run {
if {
const { task。resolve,reject } = this.tasks.shift;// 取出队首任务
this.runningCount++;// 上路计数 +1
task
.n
.catch
.finally => {
this.runningCount--;
// 完成后计数 -1
this._run;// 继续调度下一个任务
});不过，}
}
}

再看代码拆解。

1. 构造函数： 默认最大并发数为 2. 可根据业务需求改成 5、10 或更高.
2. add: 把外部传进来的函数包装成任务塞进队列，并立即尝试调度。
3. _run: 私有调度器
   • If ) → 从队列取第一个任务执行；
   • #running +1 表示该任务已“上路”。
   • .finally 中 #running -1 并递归调用自身，以确保“路口”永远有人占位或空闲。

四、实战演示：给 6 个请求 “限流” ✅

A quick demo – 创建一个并发控制器。接下来一次性加入六个不同耗时的任务，看它们如何排队执行。

// 初始化控制器：最多同时 2 个请求
const limit = new Limit;// 封装添加任务的函数
function addTask {
limit
.add => ajax)
.n => console.log)
.catch => console.log);}
// 一次性添加 6 个任务
addTask;// 耗时10s → 超时失败
addTask;// 耗时4s → 成功
addTask;// 耗时8s → 超时失败
addTask;// 耗时1s → 成功
addTask;// 耗时5s → 成功
addTask;// 耗时2s → 成功

再看执行流程，🚦 


#0s 时： 任务 1 与任务 2 同时上路。runningCount = 2️⃣。其余四个进入等待队列，

#4s 时： 任务 2 完成→计数回落至 1。立即把排在最前面的任务 4️⃣放入跑道。

#5s 时： 若此刻没有新完成，则仍保持两条并行线运行。.

#6s 时： 假设此时没有新的完成，则仍是两条线路忙碌；随后当#8s 时 ,任务 3 超时失败→计数回落至 1。再把任务 5️⃣放入跑道。

#9s 时： 任务 4 完成→计数回落至 1，把任务 6️⃣放入跑道。前言