利用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();
相关推荐
芭拉拉小魔仙17 分钟前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信
吃饭睡觉打豆豆嘛2 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man2 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
小高0072 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua3 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12043 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy3 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_14 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子4 小时前
JS实现丝滑文字滚动
前端·javascript·面试