阅读 251

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

背景

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

方案

思路:

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

代码:

<body>
  <button onclick="clickMe()">点我</button>
</body>
复制代码
// 异步请求队列
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
  }
}
复制代码

效果

在这里插入图片描述

文章分类
前端
文章标签