为什么要控制并发？

作为一名前端开发者，我们经常会遇到这样的场景：一个页面初始化时需要同时发起十几个 API 请求。按理说，如果放任这些请求像脱缰的野马一样全部冲出去，不仅会瞬间占满浏览器的并发连接数。导致后续资源加载阻塞，还可能因为瞬间流量过大把后端服务器打挂。

这时候，我们就需要一个 “交通指挥官” ——并发控制器。今天我们就来利用 Promise 和队列机制，手写一个轻量级的并发控制器。

说到主要思路。餐厅服务员模型

在动手写代码之前，我们先建立一个直观的思维模型。你可以把这个并发控制器想象成一家只有几张餐桌的小餐厅

• 最大并发数餐厅里的餐桌数量。按理说，桌子坐满了后来的客人就得排队。
• 任务队列门口等待叫号的顾客列表。
• 正在运行的任务当前正在用餐的客人数量。

我们的逻辑很简单：只要有空桌子。且门口还有人在排队，就叫号让下一位顾客进去吃饭；老实说，等顾客吃完离开，立刻清理桌子，并 检查是否要叫下一位。

再看代码实现，建立你的并发控制器

function ajax { return new Promise => { setTimeout => { // 模拟请求超时或失败的情况 if { reject);话说回来，} else { resolve;} },time)，}); 按理说，} class Limit { constructor { this.taskQueue =;// 存放待执行任务的队列 this.runningCount = 0;// 当前正在运行中的任务数 this.maxConcurrency = maxConcurrency;// 最大允许的并发数 } // 添加任务的方法 add { return new Promise => { // 将任务及其对应的 resolve/reject 存入队列，以便后续执行结果回调 this.taskQueue.push;// 每次添加新任务后都尝试去执行队列里的任务 this._run;})，} // 主要调度逻辑：检查并执行任务 _run { // 只要当前运行数小于最大并发数，且队列里还有任务。就继续执行 while { const { task,resolve,reject } = this.taskQueue.shift;// 取出队首任务

 this.runningCount++;// 增加一个“坑位”
task
.n
.catch
.finally => { this.runningCount--;其实，// 清理坑位 this._run;})，} } } 

至于实战演练，见证秩序之美！

const limit = new Limit;// 最多同时执行3个异步操作// 测试数据 - 模拟不同耗时和成功/失败场景const tasks =;不过，// 按顺序提交所有异步操作tasks.forEach=>{ addTask;})，function addTask{ limit.add=>ajax) .n) .catch);}

为什么它能工作？详细说明，

• .finally:无论成功还是失败都会释放资源 - 防止因某个请求失败而导致整个程序卡死
• .shift + while循环::通过循环处理批次 - 一次性尽可能多地填充可用空间
• Promise封装::保证外部使用者无需关心内部调度逻辑 - 对使用者透明友好

场景应用案例集合！说起来，