章
目
录
在前端开发的面试环节中，经常会遇到这样一类题目：要求实现控制并发队列，给定异步任务和并发数量作为参数，完成特定的并发控制功能。不少小伙伴面对这类问题时会感到头疼，今天就带大家一步步从0到1实现Promise并发控制，用通俗易懂的方式讲解，保证大家都能看明白。
一、基础功能实现思路
（一）示例代码准备
首先，我们通过一个简单的delay函数来模拟异步任务。这个函数接收两个参数，一个是要返回的文本text，另一个是延迟的时间time。它返回一个Promise，在设定的延迟时间后，resolve返回对应的文本。
function delay(text,time){
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve(text)
},time)
})
}
接着，定义一些具体的异步任务p1到p5，它们分别返回不同的文本，并且延迟时间也不一样。
const p1 = () => delay('1',5000)
const p2 = () => delay('2',2000)
const p3 = () => delay('3',3000)
const p4 = () => delay('4',2000)
const p5 = () => delay('5',3000)
const p = [p1,p2,p3,p4,p5]
（二）Queue类的初始化
我们要创建一个Queue类来实现并发控制。在初始化这个类的时候，需要设置异步任务数组和并发数量limit。在constructor构造函数里，除了把传入的参数赋值给类的属性外，还要从异步任务数组的开头取出limit个任务，添加到一个任务队列queue里，并且默认直接开始执行这些异步任务。
class Queue {
constructor(initArr, limit) {
this.queue = [];
this.limit = limit;
this.lists = initArr;
for (let i = 0; i < this.limit; i++) {
this.queue.push(this.lists.shift())
}
this.work();
}
work() {
// 后续会定义这个函数的具体功能
}
limit = 0;
queue = [];
lists = [];
}
（三）work函数的功能实现
work函数的作用是执行当前任务队列queue里的所有任务。在执行过程中，每当有一个异步任务完成，就从剩余的异步任务数组lists里取出第一个任务，添加到任务队列queue中。
pop() {
if (this.lists.length > 0) {
this.queue.push(this.lists.shift());
}
}
work() {
while(this.queue.length > 0) {
const requestFunc = this.queue.shift();
const request = requestFunc();
// 使用Promise.resolve确保request不是promise时，代码也能正常执行
Promise.resolve(request).finally(res => {
this.pop();
this.work();
})
}
}
这样，基础版本的Promise并发控制就实现啦，完整代码如下：
class Queue {
constructor(initArr, limit) {
this.queue = [];
this.limit = limit;
this.lists = initArr;
for (let i = 0; i < this.limit; i++) {
this.queue.push(this.lists.shift())
}
this.work();
}
pop() {
if (this.lists.length > 0) {
this.queue.push(this.lists.shift());
}
}
work() {
while(this.queue.length > 0) {
const requestFunc = this.queue.shift();
const request = requestFunc();
Promise.resolve(request).finally(res => {
this.pop();
this.work();
})
}
}
limit = 0;
queue = [];
lists = [];
}
二、进阶功能拓展
有时候，我们希望在使用过程中还能往任务队列里添加新的任务。比如，在已经创建了Queue实例q后，还能通过q.push(() => delay('6', 3000))这样的方式添加新任务。这就需要对之前的代码进行升级。
（一）新增push方法
我们新增一个外部可以调用的push方法。这个方法可以接收一个任务或者一个任务数组。如果传入的是数组，就把数组里的任务都添加到lists数组里；如果传入的是单个任务，就直接把这个任务添加到lists数组里。添加完任务后，调用pushQueue方法来处理是否把新任务添加到任务队列queue里。
push(item) {
if (item instanceof Array) {
this.lists.push(...item);
} else {
this.lists.push(item)
}
this.pushQueue()
}
（二）pushQueue方法的定义
pushQueue方法的作用是检查当前是否有条件把lists数组里的任务添加到任务队列queue中。如果lists数组里有任务，并且当前正在执行的异步任务数量小于并发限制limit，就把lists里的任务添加到queue里。这里新增了一个running变量，用来记录当前正在执行的异步任务数量。
pushQueue() {
if (this.lists.length > 0) {
for (let i = 0; i < this.limit - this.running; i++) {
const item = this.lists.shift()
if (item) this.queue.push(item);
}
}
}
（三）修改work函数
因为新增了running变量，所以在work函数里，当开始执行一个异步任务时，要把running加1；当异步任务完成时，要把running减1。同时，任务完成后不再直接调用pop方法，而是调用pushQueue方法来处理任务队列。
work() {
while(this.queue.length > 0) {
const requestFunc = this.queue.shift();
const request = requestFunc();
// 开始执行异步任务，running加1
this.running += 1;
Promise.resolve(request).finally(res => {
// 异步任务完成，running减1
this.running -= 1;
// 通过pushQueue处理任务队列
this.pushQueue();
this.work();
})
}
}
升级后的完整代码如下：
class Queue {
constructor(initArr, limit) {
this.queue = [];
this.limit = limit;
this.lists = initArr;
this.pushQueue();
this.work();
}
pushQueue() {
if (this.lists.length > 0) {
for (let i = 0; i < this.limit - this.running; i++) {
const item = this.lists.shift()
if (item)
this.queue.push(item);
}
}
}
push(item) {
if (item instanceof Array) {
this.lists.push(...item);
} else {
this.lists.push(item)
}
this.pushQueue()
}
work() {
while(this.queue.length > 0) {
const requestFunc = this.queue.shift();
const request = requestFunc();
this.running += 1;
Promise.resolve(request).finally(res => {
this.running -= 1;
this.pushQueue();
this.work();
})
}
}
limit = 0;
queue = [];
lists = [];
running = 0
}
通过以上一步步的实现，无论是基础的Promise并发控制，还是进阶的动态添加任务功能，都能顺利完成啦。希望这篇文章能帮助大家更好地理解和掌握Promise并发控制的实现原理，在面试和实际开发中都能轻松应对相关问题。
