需求：当前端同时发出多个api请求，在前端对请求的并发数量进行限制，做到同时只能处理有限个请求任务

设计思路：

• 设计 Scheduler 类 对需要发送的请求进行同一管理
• 类中配置最大并发数 “max”，并记录正在执行的请求数目 “count”
• 通过 await + Promise 对超出限制数量时的请求进行阻塞
• 当正在执行的请求完成后，按顺序对阻塞的请求进行放行

代码实现：

模拟请求

function sleep(val, time) {
    return new Promise(reslove => {
        setTimeout(() => {
            reslove(val)
        }, time)
    })
}
function addTask(val, time) {
    return () => sleep(val, time).then(result => {
        console.log(result);
        return result
    })
}

Scheduler类实现：

class Scheduler {
    constructor(max) {
        this.max = max    // 记录支持并发的任务数量
        this.count = 0    // 当前正在执行的任务数
        this.stack = []   // 使用队列保存被阻塞任务
    }

    async add(fun) {
        // 当正在执行的任务个数大于最大并发数时：使用await阻塞该请求的发送，记录 reslove 到 stack 下   
        // 待执行中的任务完成后按顺序对 stack 中的阻塞任务放行
        if (this.count >= this.max) {
            await new Promise(reslove => this.stack.push(reslove))
        }
        this.count = this.count + 1
        let result = await fun()
        this.count = this.count - 1
        if (this.stack.length) this.stack.shift()()
        return result
    }
}

效果测试：

const scheduler = new Scheduler(2)
scheduler.add(addTask(1, 1000))
scheduler.add(addTask(2, 500))
scheduler.add(addTask(3, 400))
scheduler.add(addTask(4, 200))
// 打印 2 3 1 4