随着前端的发展， Promise 已经成为了不可避免的一部分，它原生支持异步调用，可以有效地解决回调地狱的问题。但是在某些场景下，我们需要按照一定的顺序执行一组 Promise，而不是同时执行。这就需要使用串行执行的 Promise 队列。
Promise 队列的基本概念
Promise 队列，顾名思义，就是将多个 Promise 按照顺序依次执行，并且保证后一个 Promise 在前一个 Promise 执行完成之后才会开始执行。Promise 队列通常用于处理复杂的异步交互，比如需要将一个请求结果作为下一次请求的参数使用，或者需要按照用户的操作先后顺序执行某些操作。
比较常见的方案有两种：
在
then方法中逐一嵌套，形成 Promise 链将所有 Promise 实例放入数组中，通过循环依次执行，使用
async/await确保只有前一个 Promise 执行完成之后，才会执行下一个
第一种方案实现简单，但是因为在 then 中嵌套太多，导致代码可读性较差，而且容易出现错误而难以调试。
第二种方案相较于第一种来说，一旦我们需要增加或删除一个需要执行的 Promise，就需要大量的修改代码。而且在各种奇怪的边界情况下，也容易发生错误。
那怎么办呢？
正确实现串行执行的 Promise 队列
在接下来的例子中，我们将展示如何使用一个简单的函数来实现一个串行执行的 Promise 队列。
我们先看一下这个函数的代码：
-------- ----------------------------- -
-------- --------------------------------- -
------ ----------------------------
-
-------- ------ -
-- ------------------------- -
------ --------------------------------------------
-
-
------ -------
-在这个函数中，我们定义了两个函数， runPromiseFactory 和 next。
runPromiseFactory 的作用是以最简洁的方式运行一个 Promise 工厂函数，即通过 promiseFactory() 运行相应的 Promise，返回的结果是一个执行完的 Promise 实例。
next 的作用是从剩余的 Promise 工厂函数中取出一个函数并执行。
函数的核心递归逻辑出现在 next 函数中。它判断输入数组中是否还有需要执行的元素。如果还有，则使用 shift 将数组的第一个元素移除，然后调用 runPromiseFactory 函数来运行该函数，否则就不会再调用任何函数。
整个函数的返回值是 next 调用的结果，这就是我们期望执行的第一个 Promise。
接着我们给出一个使用这个函数的示例：
-------- ------------------- --- -
------ ---------- -
------ --- --------------- -- -
------------------------- --------
------------- -- -
------------------------- ------
----------
-- ------
---
--
-
----- ---------------- - -
------------------- ---
------------------- ---
------------------- --
--
------------------------------这里新定义了一个 Promise 工厂函数 createPromise，它用于创建一个 Promise 实例，并且将 Promise 实例的执行时间和 ID 打印出来。
最后我们将多个 Promise 工厂函数放在数组中传给 createQueue 函数，就成功地实现了一个串行执行的 Promise 队列。
总结
本文讲述了如何正确实现一个串行执行的 Promise 队列，以及如何使用一个简单的函数来简化我们的代码。好的代码不仅要看起来舒服，还要能够提高开发的效率和代码的可维护性。在实践中，我们可以根据自己的需求来选择适合的方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6542198c7d4982a6ebbbfb68