背景

上一篇《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
  }
}

效果