在前端开发过程中，经常遇到需要执行异步任务的场景。Promise 是一种解决异步编程的方式，通过返回一个 Promise 对象，我们可以在异步任务完成时得到一个结果或者错误。但是有时候我们可能需要取消正在执行的异步任务，本文将会介绍如何在 Promise 中实现动态取消任务。
Promise 的基础知识
在深入探讨 Promise 的取消机制前，我们需要先了解 Promise 的一些基本知识。
Promise 的状态
Promise 有三种状态：pending（等待态）、fulfilled（成功态）和 rejected（拒绝态）。当我们创建一个 Promise 对象时，它的初始状态是 pending。当异步任务执行成功时，Promise 对象会转为 fulfilled 状态，并返回一个结果；当异步任务执行失败时，则会转为 rejected 状态，并返回一个错误。
Promise 的方法
Promise 对象具有 then()、catch() 和 finally() 三个方法。
- then(onFulfilled, onRejected)：当 Promise 对象的状态为 fulfilled 时，调用 onFulfilled 方法；当 Promise 对象的状态为 rejected 时，调用 onRejected 方法。
- catch(onRejected)：当 Promise 对象的状态为 rejected 时，调用 onRejected 方法。
- finally(onFinally)：无论 Promise 对象的状态如何，都会调用 onFinally 方法。
Promise 的取消机制
Promise 的取消机制是指，在 Promise 异步任务没有完成之前，通过一定的手段取消它。在 Promise 标准中，并没有规定 Promise 对象本身具备取消机制，但是我们可以通过 Promise.race() 方法实现动态取消 Promise 异步任务。
Promise.race() 方法接收一个 Promise 对象数组作为参数，其返回值是最先解决的 Promise 对象。我们可以通过将 Promise 对象数组中最后一个元素设置为一个主动 reject 的 Promise 对象，从而实现 Promise 的取消。具体操作如下。
----- ------------- - --- ----------------- ------- -- -
--------------- --- ---- ------------
---
----- ----------- - --- ----------------- ------- -- -
-- ----- ----
---
-------------------------- ---------------
------------ -- -
--------------------
--
------------ -- -
-------------------
---在上述代码中，我们将 cancelPromise 设置为了一个主动 reject 的 Promise 对象，并且将其作为 Promise.race() 方法的最后一个参数。如果 cancelPromise 先被解决，那么整个 Promise.race() 方法就会异常终止，此时我们就成功地取消了异步任务的执行。
实战操作
下面我们通过一个具体的例子来演示如何在 Promise 中实现任务取消的功能。
假设我们有一个异步方法，用于向服务器发起 HTTP 请求。
-------- ----------------- -
------ --- ----------------- ------- -- -
-- ----- ---- -------
------------- -- -
------------- ------- --- ---- -------
-- ------
---
-现在我们需要在页面上添加一个取消按钮，用户可以在等待 HTTP 请求过程中随时点击该按钮来取消请求。具体实现如下。
------- ----------------------------
----- ------------- - --- ----------------- ------- -- -
----- --------- - -------------------------------------
----------------------------------- -- -- -
------------ ------- --- ---- ------------
---
---
----- ----------- - ------------------
-------------------------- ---------------
------------ -- -
--------------------
--
------------ -- -
-------------------
---在上述代码中，我们首先创建了一个 Promise 对象 cancelPromise，它的作用是监听取消按钮的 click 事件，一旦触发该事件，就会执行 reject() 方法，从而在 Promise.race() 方法中触发 cancelPromise 的拒绝态。
通过使用 Promise.race() 方法，我们可以同时监听 taskPromise 和 cancelPromise 两个 Promise 对象的状态变化，如果其中一个先被解决，那么整个 Promise.race() 方法就会结束，这样我们就成功地实现了任务取消的功能。
总结
在前端开发中，我们经常需要执行异步任务，但有时候我们可能需要在任务正在执行的过程中，随时取消它。本文介绍了如何通过 Promise.race() 方法实现动态取消 Promise 异步任务，包括具体实现和代码示例。希望本文能够帮助到大家，谢谢阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6489c3ff48841e98947fea5c