利用 Promise 实现带超时的异步执行
在前端开发中，异步执行是非常常见的操作，但在某些特定的场景下，我们可能需要对异步执行进行超时控制，以避免出现等待时间过长的情况。这时候，就可以通过利用 Promise 的机制来实现带超时的异步执行。
Promise 简介
Promise 是 JavaScript 中一种比 Callback 更高级的异步编程方式，它可以理解为是一个容器，里面保存着未来才会完成的某一个事件（通常是一个异步操作）的结果。
Promise 对象有三种状态：
- Pending（进行中）
- Fulfilled（已成功）
- Rejected（已失败）
实现带超时的异步执行
通常情况下，我们可以使用 setTimeout 函数来实现等待超时的控制。具体地，就是在调用异步函数之后，同时创建一个定时器，指定一个超时时间，如果超时时间到了，还没有返回结果，就将 Promise 的状态改成 Rejected。
下面就是一个基于 Promise 实现带超时的异步执行的示例代码：
-- -------------------- ---- -------
-------- ----------------------- -------- -
--- -------------- - --- ----------------- ------- -- -
------------- -- -
--------------- ----- ---------- -----
-- ---------
---
------ ---------------------- -----------------
-这个函数的参数有两个：promise 和 timeout，其中 promise 是一个异步函数的 Promise 对象，timeout 是一个超时时间的毫秒值。函数体内部创建了一个 timeoutPromise，使用定时器来实现超时控制，当调用超时时，这个 Promise 也会 reject 并返回一个错误信息。
最后，通过 Promise.race() 来实现同时执行 promise 和 timeoutPromise 的 Promise.race()，函数会返回这个 race 函数的 Promise 对象。
示例代码
下面给出一个使用 Promise 实现带超时的异步执行的完整示例代码：
-- -------------------- ---- -------
-------- ----------------------- -------- -
--- -------------- - --- ----------------- ------- -- -
------------- -- -
--------------- ----- ---------- -----
-- ---------
---
------ ---------------------- -----------------
-
-------- ----------- -
------ --- --------------- -- -
------------- -- -
----------------
-- ------
---
-
--------------------------- -----
---------- -- -
------------------
--
------------ -- -
---------------------
---在这个示例中，我们定义了一个 fetchData() 函数，它返回一个 Promise，2 秒后 resolve 数据。
接着，我们在调用 fetchData() 的 Promise 上调用 promiseTimeout() 函数，指定 1.5 秒的超时时间，然后在 then() 和 catch() 中分别处理 resolve 和 reject 结果。
总结
在本文中，我们介绍了如何使用 Promise 机制来实现带超时的异步执行，我们使用了 Promise.race() 方法来同时执行异步函数和超时 Promise，实现了异步代码的超时控制。这样做不仅可以提高异步执行函数的效率，同时也使程序更加健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648415ea48841e9894343e07