ES9 异步操作方法中新增了一个 AbortController 类，用于取消异步操作。通过创建一个 AbortController 实例，可以生成一个绑定 AbortSignal 的 AbortController.signal 属性。通过调用 AbortController.abort() 方法可以取消绑定的异步操作。本篇文章将详细介绍 AbortController 的使用方法以及示例代码。
为什么需要 AbortController？
以往在异步操作中，我们往往通过 setTimeout() 或者 requestAnimationFrame() 等方法来实现取消异步操作。但是这些方法并不是十分灵活并且适用范围有限。
ES9 中的 AbortController 就是为了解决这类问题而生的。使用 AbortController 可以在任何异步操作中轻松实现任务取消，而不用为了取消操作而去使用不适合的方式。
AbortController 相关 API
AbortController 有两个很重要的 API：
AbortController.abort()AbortController.signal
其中，AbortController.signal 是一个 AbortSignal 实例，用于监听 abort 事件的发生。
当我们调用 AbortController.abort() 方法时，所有监听 AbortSignal 对象的都会相应 abort 事件。
AbortSignal 相关 API
AbortSignal 有以下两个重要的 API：
AbortSignal.abortedAbortSignal.addEventListener()
当异步操作被取消时，AbortSignal.aborted 属性会变为 true。
同时，你也可以使用 AbortSignal.addEventListener() 方法添加一个事件监听器，在异步操作被取消时执行一些自定义的逻辑。
实例代码
-- -------------------- ---- -------
-- -- --------------- --
----- ---------- - --- ------------------
-- -- ----------- --
----- ------ - ------------------
-- -- -------
------------- -- -
-------------------
-- -------
-- --------
----- ------- - --- ----------------- ------- -- -
-- --------
-------------------------------- -- -- -
----------------------
---------- ------------------
---
-- ------
------------- -- -
----------------------
----------
-- -------
---
-- ------
--------------- -- -
-----------------------
---------------- -- -
---------------------------------
---上述代码中，我们创建了一个 AbortController 实例，并通过 controller.signal 绑定了 AbortSignal 实例，之后实现了一个模拟的异步任务，并在异步任务中监听 AbortSignal 的事件，以便在异步任务被取消时执行相关逻辑。
最终我们通过 .then() 和 .catch() 来处理异步任务结束后的情况以及异步任务出错的情况。
总结
本文介绍了 ES9 中的异步操作方法 AbortController，以及相关的 API，同时提供了相关的示例代码，希望本文能帮助到各位前端工程师在实际使用中更好的掌握和应用异步操作的相关知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c31ff883d39b48817115f0