如何限制请求的并发数量

• 设计思路：
• 代码实现：

需求：当前端同时发出多个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 + 1let result = await fun()this.count = this.count - 1if (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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！