概述
在 Web 应用开发中，有一种常见的场景是需要处理异步请求，比如发送请求到服务器获取数据，而这个请求需要花费一定的时间才能完成。通常会设置请求超时时间，如果在规定时间内没有得到服务器的响应，就认为是请求超时，而这个请求就需要停止继续等待服务器的响应。
在 JavaScript 中，使用 Promise 对象可以很方便地处理异步请求，而在 ES11 中，新增了 Promise.race() 方法，可以很容易地实现超时任务的功能。下面将详细介绍如何在 ES11 中使用 Promise.race() 方法实现超时任务。
Promise.race() 方法介绍
在 ES11 中，Promise.race() 方法是 Promise 原型上的一个方法，它接收一个 Promise 实例的数组，返回一个新的 Promise 实例。该新实例在 Promise 数组中的任意一个 Promise 实例解决或拒绝后，将采用第一个 Promise 实例的结果，返回一个新的 Promise 实例。如果 Promise 数组中所有 Promise 实例都是拒绝状态，则返回的 Promise 实例也会拒绝，并采用最后一个 Promise 实例的拒绝原因。
实现超时任务
通过 Promise.race() 方法，我们可以很容易地实现超时任务，下面是一个根据 Promise.race() 方法实现超时任务的示例代码：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
---------- -----------------
-- ----
---
-
-------- ----------- -
------ --- ----------------- ------- -- -
-- --------
------------- -- -
----------------
-- ------
---
-
-------------------------- ---------------
-------------- -- -
--------------------
--
-------------- -- -
-------------------
---上述代码中，timeout() 函数返回一个 Promise 对象，它在指定的超时时间后会拒绝 Promise 实例，并返回一个错误原因为"超时时间已到"的 Error 实例。fetchData() 函数也返回一个 Promise 对象，它模拟了一个异步请求，在 2 秒后返回一个字符串"请求结果"的解决状态。在 Promise.race() 方法中，将这两个 Promise 实例放在一个数组中，当其中一个 Promise 实例解决或拒绝时，Promise.race() 方法会采用第一个 Promise 实例的结果并返回一个新的 Promise 实例。在本示例中，如果 fetchData() 函数在 3 秒内完成了请求并返回了"请求结果"字符串，Promise.race() 方法会采用它的结果并解决新的 Promise 实例。如果 fetchData() 函数没有在 3 秒内完成请求，超时时间到达后 timeout() 函数会拒绝 Promise 实例，并返回一个错误原因为"超时时间已到"的 Error 实例，Promise.race() 方法会采用这个结果并拒绝新的 Promise 实例。
总结
在这篇文章中，我们介绍了如何在 ES11 中使用 Promise.race() 方法实现超时任务，并提供了相应的示例代码。使用 Promise.race() 方法可以很方便地处理异步请求的超时问题，可以让 Web 应用开发更加高效和简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65027ddb95b1f8cacdfc4d02