利用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();
相关推荐
前端小巷子35 分钟前
Webpack 5模块联邦
前端·javascript·面试
晓得迷路了38 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
LBJ辉3 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数12 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam13 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85013 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的15 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀15 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架