使用Promise实现异步队列-js教程-PHP中文网

使用Promise实现异步队列

月夜之吻

发布： 2025-07-10 21:40:02

原创

1040人浏览过

promise实现异步队列的核心在于通过链式调用和状态管理确保任务顺序执行。1. 使用promise.resolve()作为链式调用的起点，每个任务通过.then()链接，确保前一个任务完成后才执行下一个；2. 通过队列类封装enqueue和dequeue方法，维护任务队列与运行状态；3. 错误处理使用.catch捕获并继续执行后续任务，防止阻塞；4. 暂停与恢复功能通过新增ispaused状态及pause/resume方法实现；5. 应用场景包括资源加载、动画序列、数据同步等需要顺序控制的异步流程。

使用Promise实现异步队列

Promise实现异步队列，核心在于如何控制Promise的执行顺序，确保它们按照既定的顺序一个接一个地执行，而不是并发执行。这需要巧妙地利用Promise的链式调用和状态管理。

解决方案

使用Promise.resolve()作为队列的起点，然后通过.then()方法将每个异步操作链接起来。每个.then()接收上一个Promise的结果，并返回一个新的Promise，从而形成一个链式调用。为了确保顺序执行，每个异步操作必须等待前一个操作完成后再开始。

class PromiseQueue {
  constructor() {
    this.queue = [];
    this.isRunning = false;
  }

  enqueue(promiseFactory) {
    this.queue.push(promiseFactory);
    if (!this.isRunning) {
      this.dequeue();
    }
  }

  dequeue() {
    if (this.queue.length === 0) {
      this.isRunning = false;
      return;
    }

    this.isRunning = true;
    const promiseFactory = this.queue.shift();

    Promise.resolve()
      .then(() => promiseFactory()) // 执行Promise工厂函数
      .then(() => {
        this.dequeue(); // 递归调用，处理下一个任务
      })
      .catch(error => {
        console.error("Promise 队列中发生错误:", error);
        this.dequeue(); // 即使发生错误，也要继续处理下一个任务，防止队列阻塞
      });
  }
}

// 示例用法
const queue = new PromiseQueue();

const task1 = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("任务 1 完成");
      resolve();
    }, 1000);
  });
};

const task2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("任务 2 完成");
      // 模拟一个错误
      // reject(new Error("任务 2 失败"));
      resolve();
    }, 500);
  });
};

const task3 = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("任务 3 完成");
      resolve();
    }, 800);
  });
};

queue.enqueue(task1);
queue.enqueue(task2);
queue.enqueue(task3);

登录后复制

Promise队列的核心在于dequeue方法，它负责从队列中取出任务并执行。这里使用了一个小技巧：Promise.resolve()，它创建了一个立即resolve的Promise，作为链式调用的起点。关键点在于，dequeue 方法在每个 promise 完成后递归调用自身，确保下一个 promise 在上一个 promise 完成后才开始执行。即使promise reject，也要调用dequeue，保证整个队列不被阻塞。

为什么不直接用async/await？其实async/await在底层也是基于Promise实现的，所以这个方案的本质并没有改变。使用async/await可以简化代码，但在这个场景下，直接使用Promise链式调用可以更清晰地展示Promise的执行顺序和状态管理。

如何处理队列中的错误？

在dequeue方法中，使用了.catch来捕获Promise的错误。关键是，即使发生错误，也要调用this.dequeue()，确保队列不会因为一个Promise的失败而阻塞。实际应用中，可以根据具体的需求来处理错误，例如，可以记录错误日志，或者通知用户。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

如何暂停和恢复队列？

实现暂停和恢复队列，需要在PromiseQueue类中添加一些状态控制变量和方法。

class PromiseQueue {
  constructor() {
    this.queue = [];
    this.isRunning = false;
    this.isPaused = false; // 新增：暂停状态
  }

  enqueue(promiseFactory) {
    this.queue.push(promiseFactory);
    if (!this.isRunning && !this.isPaused) { // 只有在未运行且未暂停时才启动
      this.dequeue();
    }
  }

  dequeue() {
    if (this.isPaused) { // 如果暂停，则不执行
      return;
    }

    if (this.queue.length === 0) {
      this.isRunning = false;
      return;
    }

    this.isRunning = true;
    const promiseFactory = this.queue.shift();

    Promise.resolve()
      .then(() => promiseFactory())
      .then(() => {
        this.dequeue();
      })
      .catch(error => {
        console.error("Promise 队列中发生错误:", error);
        this.dequeue();
      });
  }

  pause() {
    this.isPaused = true;
  }

  resume() {
    this.isPaused = false;
    if (!this.isRunning) { // 恢复时，如果队列未运行，则启动
      this.dequeue();
    }
  }
}

// 示例用法
const queue = new PromiseQueue();

// ... (task1, task2, task3 定义不变)

queue.enqueue(task1);
queue.enqueue(task2);

// 暂停队列
queue.pause();
console.log("队列已暂停");

setTimeout(() => {
  // 恢复队列
  queue.resume();
  console.log("队列已恢复");
  queue.enqueue(task3); // 在恢复后添加新的任务
}, 3000);

登录后复制

关键在于新增了isPaused状态，并在dequeue方法中检查该状态。pause方法用于暂停队列，resume方法用于恢复队列。恢复队列时，需要检查队列是否正在运行，如果未运行，则启动队列。

Promise队列在实际项目中的应用场景？

Promise队列在需要控制异步任务执行顺序的场景中非常有用。例如：

资源加载器: 确保资源按照依赖关系顺序加载，例如，先加载CSS，再加载JavaScript。
动画序列: 按照特定的顺序执行动画，例如，先淡入，再移动，再淡出。
数据同步: 确保数据按照特定的顺序同步到服务器，例如，先更新用户信息，再更新用户头像。
API调用频率控制: 防止短时间内大量调用API，避免触发限流。

例如，在Web应用中，需要先加载用户的配置信息，再加载用户的个人资料，最后加载用户的消息列表。使用Promise队列可以确保这些操作按照正确的顺序执行，避免出现数据不一致的情况。

const loadConfig = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("加载配置信息");
      resolve();
    }, 500);
  });
};

const loadProfile = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("加载个人资料");
      resolve();
    }, 800);
  });
};

const loadMessages = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("加载消息列表");
      resolve();
    }, 1000);
  });
};

const queue = new PromiseQueue();
queue.enqueue(loadConfig);
queue.enqueue(loadProfile);
queue.enqueue(loadMessages);

登录后复制

Promise队列是一种简单而有效的控制异步任务执行顺序的方法。通过合理地使用Promise的链式调用和状态管理，可以轻松地实现各种复杂的异步流程控制。

以上就是使用Promise实现异步队列的详细内容，更多请关注php中文网其它相关文章！