在前端开发中，经常需要进行异步请求操作。在进行这类操作时，我们可能会遇到一些异常情况，如请求超时，导致无法得到正确的结果。本文将主要介绍 Promise 异步请求超时处理的方法，帮助读者更好地处理这类异常情况。
1. Promise 基础知识
Promise 是 es6 中新增的一种解决异步编程的方法。它是一种对象，可以通过 Promise 内部的一系列方法来解决回调嵌套、处理异步逻辑等问题。Promise 有 3 种状态，分别是：pending（进行中）、resolved（已完成）、rejected（已失败）。使用 Promise 进行异步请求时，我们可以创建一个 Promise 对象，通过 resolve 和 reject 方法来改变 Promise 的状态。
2. Promise 异步请求超时处理方法
2.1 使用 setTimeout 设置超时时间
我们可以使用 setTimeout 方法来设置异步请求的超时时间，并在超时时间内未得到结果时，手动修改 Promise 对象状态为 rejected。示例代码如下：
-- -------------------- ---- -------
-------- ----------------------- ------- - ----- -
------ --- ----------------- ------- -- -
--- ----- - ------------- -- -
--------------------
---------- ---------------
-- ---------
----------
--------- -- -----------
--------- -- -
--------------------
-------------
--
------------ -- -
--------------------
--------------
---
---
-上述代码中，我们通过 setTimeout 方法来设置请求超时时间为 5 秒，默认为 5000 毫秒。如果超时时间内未得到结果，就手动调用 reject 方法返回错误信息。
2.2 使用 Promise.race 方法
还可以使用 Promise.race 方法来实现超时处理。该方法可以传入多个 Promise 对象作为参数，返回一个新的 Promise 对象。它的作用是在其中任何一个 Promise 对象的状态发生改变时，立即返回该 Promise 对象的结果。因此，我们可以通过设置两个 Promise 对象来实现超时处理。示例代码如下：
-- -------------------- ---- -------
-------- ----------------------- ------- - ----- -
--- ----------- - ------------------- -- ------------
--- ------------- - --- ----------------- ------- -- -
------------- -- -
---------- ---------------
-- ---------
---
------ -------------------------- ----------------
-上述代码中，我们使用 fetch 方法来返回一个 Promise 对象，在超时时间内获取到数据，就调用 resolve 方法，得到正确的结果；如果超时时间内还未得到数据，就手动调用 reject 方法，返回错误信息。
3. 总结
本文主要介绍了 Promise 异步请求超时处理的两种方法，分别是使用 setTimeout 和 Promise.race 方法。使用这两种方法能够有效地避免请求超时后无法获取正确结果的问题，提高前端开发效率。
建议在编写具体业务时，根据实际情况选择合适的超时处理方式，并加以优化，帮助提高程序的健壮性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b1a5fc48841e9894e01660