利用promise实现一个请求队列控制最大请求数

在前端开发中,经常需要控制并发请求的数量以避免服务器过载或浏览器性能问题。下面我使用 Promise 实现一个请求队列控制器。

基本思路:

  1. 维护一个等待队列和一个执行队列
  2. 当有新的请求加入时,先放入等待队列
  3. 当执行队列有空位时,从等待队列取出请求执行
  4. 请求完成后,从执行队列移除,并检查是否有等待的请求
js 复制代码
class PromiseQueue {

  constructor(limit = 2) {
    this.limit = limit;
    this.running =0;
    this.queue=[];
}


    add(fn)
  {
    return new Promise((resolve, reject) => {

      const executeFn = async () => {
        this.running++;
        try {
          const result = await fn();
          resolve(result);
        } catch (error) {
          reject(error);
        } finally {
          this.running--;
          this.next();
        }
      };

      this.queue.push(executeFn);
      this.next();
    });
  }

  next() {
    if ( this.queue.length && this.running < this.limit ) {
      const fn = this.queue.shift();
      fn();
    }
  }
} 

测试用例

js 复制代码
// 测试代码
async function testPromiseQueue() {
  // 1. 创建一个最大并发数为2的队列
  const queue = new PromiseQueue(2);
  const results = [];
  const startTime = Date.now();

  // 辅助函数:创建一个带延迟的测试任务
  const createTask = (id, delay, shouldFail = false) => async () => {
    const start = Date.now() - startTime;
    console.log(`任务 ${id} 开始执行 (延迟 ${delay}ms) [时间: ${start}ms]`);
    await new Promise(resolve => setTimeout(resolve, delay));
    if (shouldFail) {
      throw new Error(`任务 ${id} 模拟失败`);
    }
    console.log(`任务 ${id} 完成 (耗时 ${delay}ms) [时间: ${Date.now() - startTime}ms]`);
    return id;
  };

  // 2. 添加测试任务
  // 快速任务 (100ms)
  queue.add(createTask(1, 100))
    .then(res => results.push(`任务1成功: ${res}`))
    .catch(err => results.push(`任务1失败: ${err.message}`));

  // 慢速任务 (200ms)
  queue.add(createTask(2, 200))
    .then(res => results.push(`任务2成功: ${res}`))
    .catch(err => results.push(`任务2失败: ${err.message}`));

  // 快速失败任务 (100ms)
  queue.add(createTask(3, 100, true))
    .then(res => results.push(`任务3成功: ${res}`))
    .catch(err => results.push(`任务3失败: ${err.message}`));

  // 超慢速任务 (300ms)
  queue.add(createTask(4, 300))
    .then(res => results.push(`任务4成功: ${res}`))
    .catch(err => results.push(`任务4失败: ${err.message}`));

  // 快速任务 (100ms)
  queue.add(createTask(5, 100))
    .then(res => results.push(`任务5成功: ${res}`))
    .catch(err => results.push(`任务5失败: ${err.message}`));

  // 3. 等待所有任务完成
  await new Promise(resolve => setTimeout(resolve, 1000));

  // 4. 打印测试结果
  console.log('\n最终结果:');
  console.log(results.sort().join('\n'));

  // 5. 验证并发数是否正确
  console.log('\n验证:');
  console.log(`最大并发数: ${queue.limit}`);
  console.log(`运行中任务数: ${queue.running}`);
  console.log(`队列中剩余任务: ${queue.queue.length}`);
}

// 执行测试
testPromiseQueue();
相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef064 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder6 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句7 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom7 小时前
JavaScript reduce()函数详解
javascript
小飞悟7 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子7 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手7 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅8 小时前
JavaScript 中你不知道的按位运算
前端·javascript