Promise.race() 是一个在 ES6 中引入的方法，它将多个 Promise 实例传入，返回一个新的 Promise 实例，并在其中，只要有一个实例率先改变状态，新的 Promise 实例就会跟着它改变状态。这个方法在处理并行请求等场景中非常有用。
在 ES11 中，Promise.race() 方法有了一些改进，可以处理更丰富的异步任务。
不过，使用 Promise.race() 仍然可能会遇到一些问题。在本文中，我们将探讨这些问题，并提供一些解决方案。
可能遇到的问题
问题 1：Promise.race() 方法无法取消某个 Promise 实例
在某些情况下，我们需要取消一个 Promise 实例，以便防止它继续执行。然而，在 Promise.race() 中，无法取消单个 Promise 实例，因为当其中一个 Promise 实例状态改变时，整个 Promise 链条就会被解决。
问题 2：Promise.race() 方法可能会导致竞速条件
由于 Promise.race() 方法只需要其中一个 Promise 实例进入 Fulfilled 状态，因此可能会带来竞速条件问题。如果我们在多个 Promise 实例中使用 race() 方法，并且这些 Promise 实例在执行时会相互排斥，那么我们就可能会遇到竞速条件的问题。
问题 3：Promise.race() 方法减少了代码的可读性
使用 Promise.race() 方法处理 Promise 实例时，可能会增加代码的复杂性，从而降低代码的可读性。如果我们在代码中使用了多个 Promise.race() 实例，那么代码将变得更加难以阅读和理解。
解决方案
解决方案 1：使用 AbortController.cancel() 方法取消 Promise 实例
在 ES11 中，引入了 AbortController 和 AbortSignal 用于管理和终止异步请求。我们可以使用 AbortController 和 AbortSignal 来取消 Promise 实例，以便防止它继续执行。
-- -------------------- ---- -------
----- ---------- - --- ------------------
----- ------ - ------------------
----- -------------- - --- ----------- ------- -- -
-------------------------------- -- -- -
---------- ------------------
-- - ----- ---- ---
---
------------- -- -
-------------------
-- ------
----- ------- - --- ------------- --------- ------- -- -
--- -
----- ------ - ----- ------------------------------- - ------ ---
----------------
- ----- ------- -
--------------
-
---
---------------------- ----------------
-------------- -- -
--------------------
--
-------------- -- -
-------------------
---在上面的代码中，我们使用了 AbortController 和 AbortSignal 来构造了一个新的 Promise 实例 timeoutPromise，并在 1 秒后使用 AbortController.cancel() 方法取消了它的执行。
通过在 Promise.race() 方法中组合 timeoutPromise 和 promise，我们可以在 promise 超时时立即拒绝掉新的 Promise 实例。
解决方案 2：保证使用 Promise.race() 方法的 Promise 实例之间互不冲突
为了避免竞速条件问题，我们需要保证使用 Promise.race() 方法的 Promise 实例之间不会相互冲突。如果不能保证这一点，我们就需要使用其他方法来确保不会出现竞速条件问题，例如使用 Promise.all() 方法。
解决方案 3：使用 async/await 代替 Promise.race() 方法
使用 async/await 可以使 Promise 实例更加易读易懂，提高代码的可读性。
-- -------------------- ---- -------
-------- -------------------- -
------ --- ----------- ------- -- -
------------- -- -
---------- ------------------
-- ------
---
-
----- -------- ------------- -
----- ---------- - --- ------------------
----- ------ - ------------------
----- ---------------------- - ---------------------
----- -------------------- - ------------------------------- - ------ ---
--- -
----- ------ - ----- ----------------------------------- -------------------------
------ -------
- ----- ------- -
----- ------
- ------- -
-------------------
-
-
-------------
-------------- -- -
--------------------
--
-------------- -- -
-------------------
---在上面的代码中，我们使用 async/await 代替 Promise.race() 方法，这使得代码更加易读易懂。我们同时使用 try...catch...finally 语法来捕获和处理任何可能的异常。
总结
在处理并行请求等场景中，使用 Promise.race() 方法可以很好的提高代码效率。在 ES11 中，我们可以使用 AbortController 和 AbortSignal 来管理和终止异步请求，从而解决 Promise.race() 方法无法取消某个 Promise 实例的问题。我们还可以使用保证使用 Promise.race() 方法的 Promise 实例之间互不冲突来确保不会出现竞速条件问题。最后，我们也可以使用 async/await 来代替 Promise.race() 方法来提高代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e0742ff6b2d6eab3b898e9