1、场景
在前端页面中需要同时发送20个请求,但是服务端有限制,需要前端控制并发数,保证最多只能同时发送5个请求。
2、需求
1、最多同时执行的任务数为10个
2、当前任务执行完成后,释放队列空间,自动执行下一个任务
3、所有任务添加到任务队列后,自动开始执行任务
3、代码实现
// 请求函数
function createTask(i) {
return () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(i);
}, 2000);
});
};
}
class TaskQueue {
constructor() {
this.max = 5;
this.taskList = [];
setTimeout(() => {
this.run();
});
}
addTask(task) {
this.taskList.push(task);
}
run() {
let len = this.taskList.length;
if (!len) return false;
let min = Math.min(this.max, len);
for (let i = 0; i < min; i++) {
// 开始占用一个任务的空间
this.max--;
let task = this.taskList.shift();
task().then((res => {
console.log('result:', res);
})).catch(error => {
throw new Error(error);
}).finally(() => {
// 释放一个任务空间
this.max++;
this.run();
});
}
}
}
const taskQueue = new TaskQueue();
for (let i = 0; i < 20; i++) {
const task = createTask(i + 1);
taskQueue.addTask(task);
}