JS任务队列限制并发数shiftPromiseresolverejectthencatchfinallythrow constructorsetTimeoutMathmin

Posted 2022-05-31 web半晨

目录

• 1、场景
• 2、需求
• 3、代码实现

---

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