当我们在处理一些异步任务时，有时候我们需要在一定的时间内等待任务完成并返回结果。如果等待的时间过长，我们可能不想无限等待而是想要在一定时间内结束等待，并且我们可能希望在任务超时时有一些特殊的处理方式。在前端开发中，Promise 是一种很常用的处理异步任务的方式，那么 Promise 如何处理异步任务的成功超时呢？
Promise 超时处理方案
在 Promise 中，我们可以使用 race 方法和定时器来实现任务的超时处理。race 方法可以接收一个 Promise 数组，当其中任意一个 Promise 完成后，race 方法的返回值就会是该 Promise 的返回值。那么，我们就可以在使用 race 方法的同时，使用 setTimeout 函数来设置一个超时时间，代码示例如下：
-- -------------------- ---- ------- -------- ----------------------- -------- - -- ---- ------- -- ------ --- ----------------- ------- -- - -- ----- ----- ----- - ------------- -- - -- -------- ---------- -------------- ---------- -- -------- -- -- ---- ------- ------- ---- ---------------------- ------------------- -- - ------------------- -- ------- --------------- -------------- -- - ------------- -- -- -展开代码
在上述代码中，我们定义了一个 timeoutPromise 函数，该函数接收两个参数：一个 Promise 对象和一个超时时间。timeoutPromise 函数返回一个新的 Promise 对象，在该 Promise 对象中我们使用 race 方法来监听原 Promise 对象和定时器，当其中一个事件完成时，Promise.race 的返回结果就是完成的那一个事件的结果。如果超时时间到达，那么定时器就会触发，在定时器触发时我们会使用 reject 方法来返回一个超时错误对象。
实例分析
为了更好的理解超时处理方式的使用，我们来看一个实例：
-- -------------------- ---- ------- -------- ----------- - ------ --- --------------- -- - ------------- -- - ----------------- -- ----- -- - --------------------------- ----------------- -- - ------------------- -- ----- -------------- -- - -------------------------- -- -- -------- -------- --展开代码
在上述代码中，我们定义了一个 asyncTask 函数用于表示一个异步任务。在 asyncTask 函数中，我们使用 setTimeout 方法模拟了一个延时执行的异步任务，并设置了 5000ms 的延时。接着，我们使用 timeoutPromise 函数来对 asyncTask 函数进行了尝试，且设置了 3000ms 的超时时间。在实际条件下，asyncTask 函数需要 5000ms 的时间才能完成，而 timeoutPromise 函数设置的超时时间仅为 3000ms，因此在超时前就会触发定时器并抛出一个超时错误对象，error.message 的值就是 'Promise timeout'。
总结
通过上述实例，我们可以看出 Promise 超时处理方式的便利之处。通过 Promise.race 方法和定时器的结合，我们可以实现对异步任务的超时处理，从而避免了无限等待的尴尬。在实际开发中，我们可以根据需求设置超时时间来控制程序的合理运行，并且还可以根据错误类型来生成合适的错误信息，以供后续的错误处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653a33517d4982a6eb40644a
