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