Promise 是 JavaScript 中一种非常重要的异步编程解决方案，自 ES6 以来，它是一个最基础的标准之一。而在 ES12 中，Promise.race 方法提供了一种能够帮助我们优雅地处理异步操作的方法。在本文中，我们将探讨 ES12 中的 Promise.race 方法，并重点介绍如何使用它来应对超时的处理方案。
Promise.race
Promise.race 方法会返回一个新的 Promise 实例，该实例将在任何一个传入的 Promise 实例成功 resolve 或者失败 reject 时 resolve 或 reject，返回的结果与最先 resolve 或 reject 的 Promise 实例保持一致。
语法如下：
Promise.race(iterable)
其中，iterable 参数是一个可迭代对象，例如一个数组或一个 Set 对象，包括了要同时执行的 Promise 实例。
来看一个简单的示例：
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - ------------- -- ----------------- ----- --- ----- -------- - --- ----------------- ------- -- - ------------- -- ------------------ ----- --- ----------------------- ---------- ------------- -- --------------------
输出结果为 second，因为 promise2 的延迟时间更短，最先 resolve。
超时处理
在异步编程中，有时我们需要限制异步操作的执行时间。例如，在从 API 加载资源时，如果加载时间过长，用户体验会受到极大的影响。这时我们就需要设置超时时间，并在超时后返回一个失败状态的 Promise，以便后续逻辑进行处理。
使用 Promise.race 方法，我们可以很容易地实现这个目标。示例代码如下：
-- -------------------- ---- -------
-------- ------------------ -
------ --- ----------- ------- -- -
------------- -- ---------- ------------------ ----
---
-
-------- ---------- -
------ --------------
--------------------------------------
---------------------
---
-
----------
---------------- -- ----------------
------------ -- ------------------
-------------- -- ----------------------在这个示例中，我们用 Promise.race([fetch, timeoutPromise]) 的形式，将 API 数据请求和超时时间的 Promise 实例同时传入。如果 API 数据请求在 5000ms 内返回结果，则 Promise.race() 会返回请求的结果。如果超时时间到了，timeoutPromise() 返回的 Promise 将会 reject，并抛出一个超时的错误信息。
总结
ES12 中的 Promise.race 方法很方便地实现了多个异步任务的协同处理，包括超时处理。它为我们提供了一种优雅高效的方式来解决异步编程中常见的问题，本文介绍了在应对超时时使用 Promise.race 的处理方案。掌握了这个方法，相信你在你的日常前端开发工作中会更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ac914d48841e9894883670