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

最新推荐文章于 2024-05-14 10:57:17 发布

milugloomy

最新推荐文章于 2024-05-14 10:57:17 发布

阅读量2.3k

点赞数

文章标签：并发限制异步队列 JavaScript

本文链接：https://blog.csdn.net/milugloomy/article/details/111461084

版权

背景

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

效果

在这里插入图片描述

milugloomy

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现异步请求并发数限制

背景上一篇《JavaScript 阻塞方式实现异步任务队列》实现了异步请求依次执行的方案，实际上就是限制同一时间只能有一个异步请求，并发请求数为1。那实现流量控制，怎么实现并发数大于1的情况呢？方案思路：使用Promise.all来保证并发数限制待Promise.all返回后再执行下一轮的Promise.all任务开启时，标记running状态为true队列中任务全部处理完后标志running状态为false代码：// 异步请求队列const queue = []// 用来模拟不
复制链接

扫一扫