Promise 是 JavaScript 中的一种异步编程解决方案，它可以帮助我们更好地处理异步操作，避免了回调地狱的问题。但是，在使用 Promise 的过程中，我们有时候需要取消某个异步任务，那么该怎么操作呢？
Promise 的取消操作
在 Promise 中，我们可以通过两种方式来取消异步任务：一种是使用 Promise.race() 方法，一种是使用 AbortController。
使用 Promise.race() 方法
Promise.race() 方法会返回一个新的 Promise，它将会在其中一个 Promise 对象变为 resolved 或 rejected 状态时，立即返回相应的结果。因此，我们可以利用这个特性来实现取消异步任务的操作。
具体来说，我们可以将需要取消的异步任务封装成一个 Promise 对象，然后将这个 Promise 对象和一个新的 Promise 对象一起传入 Promise.race() 方法中。当需要取消任务时，我们只需要调用新的 Promise 的 resolve() 函数即可。
下面是一个简单的示例代码：
-- -------------------- ---- -------
-------- --------- -
------ --- --------------- -- ------------------- -----
-
-------- -------- -
------ --- ------------- --------- ------- -- -
--- -
----------------- --------
----- ------------
----------------- ------
----------
- ----- ------- -
--------------
-
---
-
----- ------ - --- --------------- -- ------------------- -------
----------------------- ---------------- -- -
----------------- -----------
-------------- -- -
---------------------
---在上面的代码中，我们定义了一个 doTask() 函数，它会执行一个异步任务。然后，我们创建了一个名为 cancel 的 Promise 对象，它将在 2 秒后变为 resolved 状态。最后，我们将 doTask() 和 cancel 一起传入 Promise.race() 方法中，当 cancel 变为 resolved 状态时，就会触发 Promise.race() 的 then() 回调函数，从而实现了取消异步任务的操作。
使用 AbortController
AbortController 是一个新的 API，它可以用来取消异步任务。它提供了一个 abort() 方法，可以在任何时候取消异步任务。
具体来说，我们可以将需要取消的异步任务封装成一个 Promise 对象，然后将这个 Promise 对象和一个新创建的 AbortController 对象一起传入 Promise.race() 方法中。当需要取消任务时，我们只需要调用 AbortController 的 abort() 方法即可。
下面是一个简单的示例代码：
-- -------------------- ---- -------
-------- --------- -
------ --- --------------- -- ------------------- -----
-
-------- -------------- -
------ --- ------------- --------- ------- -- -
--- -
----------------- --------
----- ------------
----------------- ------
----------
- ----- ------- -
--------------
-
---
-
----- ---------- - --- ------------------
--------------------------------- -- -
----------------- -----------
-------------- -- -
---------------------
---
-- ----
-------------------在上面的代码中，我们定义了一个 doTask() 函数，它会执行一个异步任务，并接受一个 AbortSignal 对象作为参数。然后，我们创建了一个名为 controller 的 AbortController 对象，并将它的 signal 属性作为参数传递给 doTask() 函数。最后，我们调用 controller 的 abort() 方法来取消任务。
总结
通过上面的介绍，我们可以看到，Promise 提供了两种方式来取消异步任务：一种是使用 Promise.race() 方法，一种是使用 AbortController。两种方式各有优缺点，我们可以根据具体的需求来选择使用哪一种方式。
在实际开发中，我们经常需要取消一些比较耗时的异步任务，这样可以提高程序的性能和响应速度。因此，掌握 Promise 的取消操作，对于提高前端开发效率和代码质量都有着重要的意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6603f409d10417a222079b29