如何限制请求的并发数量-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何限制请求的并发数量。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：当前端同时发出多个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
    }
}

效果测试：文章来源地址https://www.toymoban.com/news/detail-541589.html

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