随着互联网的迅速发展，JavaScript（以下简称JS）已成为前端开发中不可或缺的重要工具。而 Promise 对象则是JS中非常重要的一个概念。
Promise对象可简单理解为一个容器，用于异步操作的结果。它的状态分为三种：等待（Pending）、完成（Fulfilled）和拒绝（Rejected）。
本篇文章主要介绍如何构建带超时控制的 Promise 对象。这个方法能帮助我们在异步操作时，当操作时间过长无法得到响应时，自动结束这个异步操作，避免占用资源和降低用户等待体验。
Promise 对象的常规用法
首先，让我们复习一下 Promise 对象的常规用法。
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- ------ -- --- -- ------- - -------------- - ---- - ---------------- - --- ------------------- -- - -- -------- -------------- -- - -- -------- ---展开代码
其中，Promise 的构造函数接收一个函数作为参数，这个函数接收两个参数：resolve 和 reject，分别表示操作成功和失败时的处理。
构造函数执行后，返回一个 Promise 对象。该对象具有 then 方法，用于处理操作成功后的逻辑，并有一个 catch 方法，用于捕获操作异常和失败时的逻辑处理。
构建带超时控制的 Promise 对象
当进行异步操作时，有一定概率会发生超时异常。例如，请求了一个资源，但由于网络问题或其他原因，无法在规定时间内获取响应。
在这种情况下，为了保持程序的运行稳定性和用户等待体验，我们需要对异步操作进行超时控制。
下面是一个简单的超时控制的 Promise 图示例：
-- -------------------- ---- ------- -------- ---------------- -------- - -- ------ ------- -- --- -------------- - --- ----------------- ------- -- - ------------- -- - --------------- ------- - -------- --------------- -- -------- --- -- ---- ------- -- ------ ---------------------- ----------------- - -- ------- ------- ---- ----- ------- - --- ----------------- ------- -- - ------------- -- - --------------- -- ---- --- ---------------- ------------- -- - ----------------- -------------- -- - ------------------- ---展开代码
在上面示例中，我们重新封装一个超时控制函数 timeout。该函数接收两个参数：promise 是一个常规的 Promise 对象，timeout 是限制异步操作的时间。函数内部，先创建了一个单独的 Promise 对象 timeoutPromise，并在约定时间后自动拒绝该 Promise 对象。然后利用 Promise.race 链接 promise 和 timeoutPromise，返回一个新的 Promise 对象。
由于 Promise.race 函数会返回先完成的 Promise 对象，因此如果异步操作成功完成，promise 返回的结果会被正常处理并返回，而 timeoutPromise 等待的时间过期时，timeoutPromise 将返回一个超时错误。综上所述，通过 timeout 函数包装后，我们可以轻松地实现超时控制。
总结
到此，我们已经学会了如何创建带超时控制的 Promise 对象。通过将一个超时 Promise 对象和常规 Promise 对象链接在一起，我们可以实现自动超时、避免资源浪费和提高用户体验等功能。
当然，除了超时控制，Promise 还有很多其他强大的应用之处，例如 Promise 链式调用、嵌套调用等等。对于企业级应用的前端开发者来说，熟练掌握 Promise 使用方法尤为重要。
最后，为了避免滥用 Promise，我们建议在具有优化异步控制需求的情况下，才使用 Promise 和 Promise 链式调用。如果仅仅是单纯的异步请求，那么使用回调函数或 Generator 可以更加简洁方便。
参考链接：What's Promise ❓- MDN Web Docs (mozilla.org)
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ae0b49add4f0e0ff7974bc
