Promise是JavaScript中处理异步编程的强大工具。然而，在某些情况下，我们可能需要能够取消Promise。例如，在实现长时间运行的操作时，如果用户取消操作，我们希望停止执行Promise，以节省系统资源和提高性能。本文将介绍使用ES9实现 可取消Promise的方法，并提供详细的示例代码。
什么是Promise?
Promise是JavaScript中一种代表异步操作的一种对象。它提供了一种允许我们处理异步代码的方式，避免了回调地狱，并且允许我们更好地控制代码执行的顺序。Promise构造函数接收一个函数参数，该函数将在异步操作完成后调用。异步操作达成，我们该Promise状态将从pending转为fulfilled或rejected。在Promise处于pending状态时，我们可以使用then()方法来监听Promise状态的改变，并在状态改变时执行相应的代码，例如：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
------------------- -- -
-------------------- -- ---------
---为什么需要可取消Promise
尽管Promise极大地改善了异步编程的处理方式，一些问题仍然存在。例如，在实现长时间运行的Promise时，有可能出现用户取消操作的情况。如果没有这个功能，我们将不得不等待这些操作完成，浪费系统资源并带来性能问题。这时候我们希望Promise能够取消，在用户取消操作时，Promise应该停止执行。
使用 AbortController 实现可取消 Promise
ES9提供了一个新的方法来创造可取消 Promise：使用AbortController 对象。AbortController是一个类，它允许我们生成一个AbortSignal对象。这个AbortSignal对象可以被传递给我们异步操作中的各个函数，并且在需要取消Promise时，我们可以调用AbortSignal的 abort()方法。由于AbortSignal在取消时抛出DomException异常，我们可以捕获异常以终止我们的Promise。
在实现可取消Promise时，我们需要遵循以下步骤：
- 创建一个AbortController对象和AbortSignal信号。
- 将AbortSignal作为全局对象传递给我们的异步操作函数中，例如：
fetch(url, {signal: abortSignal})。 - 监听AbortSignal的取消事件，例如：
abortSignal.addEventListener('abort',() => { //doSomething })。 - 在异步操作中检测AbortSignal，如果已经取消，则终止Promise。
具体操作如下：
-- -------------------- ---- -------
----- ----------------- -
--------------- -
-- ---------------------------------
--------------- - --- ------------------
----- - ------ - - ----------------
-- --------------------------
------------ - --- ------------- --------- ------- -- -
--- -
----- ------ - ----- -----------
----------------
- ----- ------- -
--------------
-
---
-- --------------------
-------------------------------- -- -- -
---------- -------------- -----------
---
-
-- ---------
-------- -
------------------------
-
-- ---------------------
-------------- --------- -
------ --------------------------- ----------
-
-在上述代码中，我们创建了一个CancelablePromise类，该类接受一个异步操作函数，并使用AbortController将其转换为可取消Promise。在执行Promise时，我们使用监听AbortSignal的方式来检测取消请求，并使用reject方法抛出异常以终止Promise。同时，我们提供了一个cancel()方法来取消Promise。
以下代码展示了使用我们自定义的CancelablePromise类的示例：
-- -------------------- ---- -------
----- ------------------- - ----- -------- -- -
------ --- ----------------- ------- -- -
----- --------- - ------------- -- -
----------------
-- -------
----------------------
-------------------------------- -- -- -
------------------------
---------- -------------- -----------
---
---
--
----- ------- - --- ---------------------------------------
------------------
------------- -- -
-----------------
-- ------
-------------
-------- -- -
-------------------- --------
--
------- -- -
--------------------------- ---------- --------
-
--在上述代码中，我们定义了一个执行时间为10秒的异步操作函数，并实例化了一个CancelablePromise对象。在延迟5秒后，我们取消了Promise。由于我们在异步操作中检测了AbortSignal的状态，所以我们的Promise将在5秒后终止执行，并抛出一个“Promise aborted”异常。
总结
在本文中，我们学习了如何使用 ES9 提供的 AbortController 实现可取消 Promise。我们解释了为什么需要可取消Promise，同时提供了详细的示例代码来阐述可取消Promise的实现方法。如果你在遇到长时间运行的 Promise 时，需要提供一个可取消的 Promise。那么，可以根据本文提供的方法实现自己的可取消 Promise。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d780a48841e9894bc3ce2