在前端开发中，由于网络或其他原因，经常需要中断或取消正在进行的异步操作。此时， Promise 提供了一种简单而强大的方式来处理异步操作的取消。
取消一个 Promise 的最常见方法
取消一个 Promise 的最常见的方法是通过 Promise.race 来配合一个取消的 Promise 来实现。具体步骤如下：
- 创建一个取消 Promise，它会在你需要取消的时候 reject。
- 通过
Promise.race将你的 Promise 和取消 Promise 组合起来，这样当取消 Promise 被 resolve 或 reject，整个 Promise 都会被取消。
示例代码：
-- -------------------- ---- -------
----- ----------------- -
-------------------- -
--- ------ - -----
----- ------------- - --- ----------- ------- -- -
------ - -- -- -
---------- -------------- --- ---- --------------
--
---
------------ - ---------------------- ----------------
----------- - -------
-
-
-- ----
----- -------------- - --- ----------------- -- -
-- --------
------------- -- -
--------------------
-- ------
---
----- ----------------- - --- ----------------------------------
-- - ----- -----
------------- -- -
---------------------------
-- -----
-------------------------
---------------- -- -
----------------------
--
-------------- -- -
--------------------------- -- -- ------- --- ---- ----------
---使用 AbortController 来取消 Promise
在 ES2018 中，引入了 AbortController 和 AbortSignal，它们提供了一种更好的方式来取消异步操作。它们在浏览器和 Node.js 中都可以使用。
使用 AbortController 取消 Promise 的基本流程如下：
- 创建一个
AbortController实例，它有一个signal属性，是用来取消操作的。 - 将
signal属性传递给异步操作所在的函数。 - 在异步操作中，检查
signal.aborted，如果为true，则表示需要取消操作。 - 在需要取消操作时，调用
abort方法。
示例代码：
-- -------------------- ---- -------
-- - ------ ---------
-------- -------------- - ------ -- -
------ ---------- - ------ --
-------------- -- -----------------
-
-- -------
----- ---------- - --- ------------------
----- ------ - ------------------
---------------------- - ------ --
------------ -- ------------------
-------------- -- ----------------------
-- - ----- -----
------------- -- -
-------------------
-- -----总结
Promise 提供了一种简单而强大的方式来处理异步操作的取消。使用 Promise.race 和取消 Promise 或者 AbortController，都可以实现异步操作的取消。在实际开发中，可以根据具体的场景选择不同的方式来取消异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64980e5748841e9894520a7d