如何正确地实现一个串行执行的 Promise 队列-JavaScript中文网-JavaScript教程资源分享门户

随着前端的发展， Promise 已经成为了不可避免的一部分，它原生支持异步调用，可以有效地解决回调地狱的问题。但是在某些场景下，我们需要按照一定的顺序执行一组 Promise，而不是同时执行。这就需要使用串行执行的 Promise 队列。

Promise 队列的基本概念

Promise 队列，顾名思义，就是将多个 Promise 按照顺序依次执行，并且保证后一个 Promise 在前一个 Promise 执行完成之后才会开始执行。Promise 队列通常用于处理复杂的异步交互，比如需要将一个请求结果作为下一次请求的参数使用，或者需要按照用户的操作先后顺序执行某些操作。

比较常见的方案有两种：

在 then 方法中逐一嵌套，形成 Promise 链
将所有 Promise 实例放入数组中，通过循环依次执行，使用 async/await 确保只有前一个 Promise 执行完成之后，才会执行下一个

第一种方案实现简单，但是因为在 then 中嵌套太多，导致代码可读性较差，而且容易出现错误而难以调试。

第二种方案相较于第一种来说，一旦我们需要增加或删除一个需要执行的 Promise，就需要大量的修改代码。而且在各种奇怪的边界情况下，也容易发生错误。

那怎么办呢？

正确实现串行执行的 Promise 队列

在接下来的例子中，我们将展示如何使用一个简单的函数来实现一个串行执行的 Promise 队列。

我们先看一下这个函数的代码：

// javascriptcn.com 代码示例
function createQueue(promiseFactories) {
  function runPromiseFactory(promiseFactory) {
    return promiseFactory().then(next);
  }

  function next() {
    if (promiseFactories.length) {
      return runPromiseFactory(promiseFactories.shift());
    }
  }

  return next();
}

在这个函数中，我们定义了两个函数， runPromiseFactory 和 next。

runPromiseFactory 的作用是以最简洁的方式运行一个 Promise 工厂函数，即通过 promiseFactory() 运行相应的 Promise，返回的结果是一个执行完的 Promise 实例。

next 的作用是从剩余的 Promise 工厂函数中取出一个函数并执行。

函数的核心递归逻辑出现在 next 函数中。它判断输入数组中是否还有需要执行的元素。如果还有，则使用 shift 将数组的第一个元素移除，然后调用 runPromiseFactory 函数来运行该函数，否则就不会再调用任何函数。

整个函数的返回值是 next 调用的结果，这就是我们期望执行的第一个 Promise。

接着我们给出一个使用这个函数的示例：

// javascriptcn.com 代码示例
function createPromise(time, id) {
  return function() {
    return new Promise(resolve => {
      console.log(`Promise${id} start`);

      setTimeout(() => {
        console.log(`Promise${id} end`);
        resolve();
      }, time);
    });
  };
}

const promiseFactories = [
  createPromise(3000, 1),
  createPromise(2000, 2),
  createPromise(1000, 3)
];

createQueue(promiseFactories);

这里新定义了一个 Promise 工厂函数 createPromise，它用于创建一个 Promise 实例，并且将 Promise 实例的执行时间和 ID 打印出来。

最后我们将多个 Promise 工厂函数放在数组中传给 createQueue 函数，就成功地实现了一个串行执行的 Promise 队列。

总结

本文讲述了如何正确实现一个串行执行的 Promise 队列，以及如何使用一个简单的函数来简化我们的代码。好的代码不仅要看起来舒服，还要能够提高开发的效率和代码的可维护性。在实践中，我们可以根据自己的需求来选择适合的方案。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6542198c7d4982a6ebbbfb68