JS任务队列、限制并发数、shift、Promise、resolve、reject、then、catch、finally、throw 、constructor、setTimeout、Math、min

---

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);
}