Promise 是现代 JavaScript 中最重要的提升之一，它解决了回调地狱（Callback Hell）的问题，让我们可以更优美地编写异步代码。但是，在实际开发中，我们通常会遇到 Promise 延迟解决（Deferred Promise）的问题，也就是 Promise 的状态不是立即可用，需要一些额外的处理才能解决。在本文中，我们将深入探讨 Promise 延迟解决的技巧，并提供一些常见的应用场景和示例代码。
Promise 延迟解决的问题
Promise 的状态有三种，分别是进行中（Pending）、已解决（Fulfilled）和已拒绝（Rejected）。在一般情况下，Promise 的状态是由异步操作决定的，比如一个 Ajax 请求成功，就会把 Promise 状态改为已解决，而如果失败，则为已拒绝。但是，在某些情况下，Promise 的状态是无法立即确定的，比如：
- 在实际应用中，我们可能需要在某一个条件满足之后才能决定 Promise 的状态，比如定时器、用户输入等。
- 我们有时候需要在一个异步操作执行完毕之后，才能开始另一个异步操作，这时候就需要一个延迟解决的 Promise。
这些情况都需要我们自己定义一个 Deferred Promise，也就是一个未定状态的 Promise，然后在满足条件的时候手动解决它。接下来，我们将介绍一些常见的 Deferred Promise 技巧。
1. 简单的延迟解决
最简单的延迟解决是通过一个对象来保存 Promise 对象和 resolve、reject 方法。比如下面这个例子：
-- -------------------- ---- -------
-------- --------- -
--- -------- -------
----- ------- - --- ----------- -- -- -
------- - --
------ - --
---
------------- -- -
----------
-- ----
------ - -------- -------- ------ --
-
----- - -------- -------- ------ - - ------------
--------------- -- -------------------------这里的 delay 函数返回的是一个对象，包括 promise、resolve 和 reject 三个属性。promise 是一个未定状态的 Promise，通过 resolve 方法可以把它解决为已解决状态，从而触发 then 方法里的回调函数执行。在这个例子中，我们通过 setTimeout 把 Promise 延迟了 1 秒钟，等到 1 秒钟之后再通过 resolve 方法解决它。
2. Promise.race 和 Promise.all 的延迟解决
Promise 提供了 Promise.race 和 Promise.all 两个方法，可以分别等待一组 Promise 对象中的最快完成的 Promise 和全部完成的 Promise。这两个方法也可以用于延迟解决 Promise。
比如下面这个例子：
-- -------------------- ---- -------
-------- --------- -
--- -------- -------
----- ------- - --- ----------- -- -- -
------- - --
------ - --
---
------------- -- -
----------
-- ----
------ --------
-
----- -------- - -
------------
------------
------------
--
------------------------------ -- -------------------------在这个例子中，我们定义了一个 delay 函数，返回一个 Promise 对象，但是没有单独设置 resolve、reject 方法，而是直接返回 Promise 对象。然后，我们创建了三个 Promise，分别延迟 1 秒钟、2 秒钟和 3 秒钟。最后，通过 Promise.race 方法等待其中最快完成的 Promise，从而触发 then 方法里的回调函数执行。
另一个例子是 Promise.all 方法的延迟解决：
-- -------------------- ---- -------
-------- --------- ------ -
--- -------- -------
----- ------- - --- ----------- -- -- -
------- - --
------ - --
---
------------- -- -
---------------
-- ----
------ --------
-
----- -------- - -
----------- ---
----------- ---
----------- ---
--
----------------------------------- -- ----------------------- ---------这个例子中，我们定义了一个 delay 函数，返回一个延迟一定时间才解决的 Promise，并传入一个值。然后，我们创建了三个 Promise，分别延迟 1 秒钟、2 秒钟和 3 秒钟，并分别传入不同的值。最后，通过 Promise.all 等待这三个 Promise 完成，并把它们的值作为数组传入 then 方法里的回调函数。
3. 等待条件的延迟解决
有时候，我们需要在某个条件满足之后才能解决 Promise，这时候可以使用一个 while 循环来不断检测条件，直到满足条件后再手动解决 Promise。
比如下面这个例子：
-- -------------------- ---- -------
-------- --------------------- -
--- -------- -------
----- ------- - --- ----------- -- -- -
------- - --
------ - --
---
----- ----- - -- -- -
-- ------------- -
----------
- ---- -
----------------- ------
-
--
--------
------ --------
-
----- ------- - ------------- -- -
------ ------------------- --- -----------
---
--------------- -- -------------------------这个例子中，我们定义了一个 delayUntil 函数，接收一个函数作为条件，返回一个未定状态的 Promise。然后，我们定义了一个 check 函数，用于不断检测条件是否满足，如果满足的话就执行 resolve 方法，解决 Promise。如果不满足的话，就等待 1 秒钟之后再次检测。最后，我们通过 document.readyState 来等待页面加载完成，当页面加载完成之后，才能触发 then 方法里的回调函数执行。
4. 等待队列的延迟解决
有时候，我们需要在一个异步操作执行完毕之后，才能开始另一个异步操作。这时候，我们可以使用一个队列来保存需要等待的异步操作，然后不断检测队列，直到队列里没有异步操作之后再解决 Promise。
比如下面这个例子：
-- -------------------- ---- -------
----- ----- -
------------- -
---------- - ---
-
------------- -
----------------------
-
--------- -
------ -------------------
-
--------- -
------ ----------------- --- --
-
-
-------- ------------------- -
--- -------- -------
----- ------- - --- ----------- -- -- -
------- - --
------ - --
---
----- ----- - -- -- -
-- ------------------ -
----------
- ---- -
----------------- ------
-
--
--------
------ --------
-
--- ----- - --- --------
--------------- ---------- -- -- ------------------- --- --------- ---
--------------- ---------- -- -- ------------------- --- ------------- ---
--------------- ---------- -- -- ------------------- --- ---------- ---
-------- ------------ -
-- ----------------- -
------ ------------------
- ---- -
----- ---- - ----------------
------ -------------------------------------
-
-
-------------------- -- -------------------------这个例子中，我们定义了一个 Queue 类，用于保存需要等待的异步操作。然后，我们定义了一个 delayUntilEnd 函数，用于等待某个异步操作结束，传入一个对象，其中包含一个条件函数。这个函数通过不断检测条件是否满足来实现等待的目的。
然后，我们创建了一个队列，保存了需要等待的三个异步操作，分别是页面加载前、页面加载中和页面加载后。最后，我们定义了一个 checkQueue 函数，用于不断检测队列，如果队列为空则解决 Promise，如果不为空则出队一个操作并等待它执行完毕后再次调用 checkQueue 函数。
总结
通过本文的介绍，我们了解了 Promise 延迟解决的各种技巧，包括简单的延迟解决、Promise.race 和 Promise.all 的延迟解决、等待条件的延迟解决和等待队列的延迟解决。这些技巧可以帮助我们更好地解决实际开发中的问题，并提高代码的可读性和可维护性。希望读者能够学习并灵活运用这些技巧，写出更好的异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64786297968c7c53b04a1443