当前位置: 首页 > >

JavaScript实现异步请求并发数限制

发布时间:

背景

上一篇《JavaScript 阻塞方式实现异步任务队列》实现了异步请求依次执行的方案,实际上就是限制同一时间只能有一个异步请求,并发请求数为1。
那实现流量控制,怎么实现并发数大于1的情况呢?


方案

思路:


使用Promise.all来保证并发数限制待Promise.all返回后再执行下一轮的Promise.all任务开启时,标记running状态为true队列中任务全部处理完后标志running状态为false

代码:






// 异步请求队列
const queue = []
// 用来模拟不同的返回值
let index = 0
// 标志是否正在处理队列中的请求
let running = false
// 异步请求并发数限制
const syncCount = 2

// 使用setTimeout模拟异步请求
function request(index) {
return new Promise(function (resolve) {
setTimeout(() => {
resolve(index)
}, 1000)
})
}

// 连续点击,触发异步请求,加入任务队列
function clickMe() {
addQueue(() => request(index++))
}

// 当队列中任务数大于0时,开始处理队列中的任务
function addQueue(item) {
queue.push(item)
if (queue.length > 0 && !running) {
running = true
processMulti(syncCount)
}
}

// 使用Promise.all来保证并发数限制
function processMulti(count) {
const arr = []
for (let i = 0; i < count; i++) {
const item = queue.shift()
item && arr.push(item())
}
if(arr.length > 0) {
Promise.all(arr).then(res=>{
console.log(res)
processMulti(count)
})
} else {
running = false
}
}

效果



友情链接: 时尚网 总结汇报 幼儿教育 小学教育 初中学习资料网