ES9 提案中最受欢迎的一个功能是 AbortController。AbortController 允许我们在异步任务执行时来取消它们，从而提高应用程序的可靠性和稳定性。本文将详细介绍 AbortController 的用法和指导意义。
AbortController 的用法
AbortController 可以以如下方式实例化：
const controller = new AbortController();
我们可以使用 controller 对象中的 abort() 方法来取消一个异步任务：
controller.abort();
在异步任务中，我们需要将 controller 对象传递给需要取消的 API 中，比如 fetch()：
-- -------------------- ---- -------
----- ---------- - --- ------------------
----- - ------ - - -----------
---------- - ------ ---------------- -- -
-- ---
------------ -- -
-- --------- --- ------------- -
------------------ -------------
- ---- -
-------------------- ----------- -----
-
---如上所示，我们将 controller 对象的 signal 属性传递给 fetch() 方法，表示当前异步任务可以被取消。
在调用 fetch() 之后，我们可以在任何时候通过调用 controller.abort() 方法来取消该任务。
AbortController 的指导意义
AbortController 可以用于多种场景：
取消未完成 HTTP 请求
由于网络波动、服务器出错等原因，我们可能会需要取消正在进行的 HTTP 请求，以防在请求完全执行之前发生错误。使用 AbortController，我们可以通过简单的调用 abort() 方法来实现这一点。
关闭 Websocket 连接
WebSocket 是一种现代的客户端-服务器协议，但是它们可能会很长时间运行。使用 AbortController，我们可以在需要关闭 WebSocket 连接时轻松地取消它们。
中止耗时大的任务
在进行需要较长时间才能完成的任务时，我们可能需要一种方法来释放 CPU。这可以通过 AbortController 来实现。如果任务超时或用户取消它，则可以通过调用 abort() 方法来中止它。
示例代码
下面是一个使用 AbortController 来取消 HTTP 请求的示例代码：
-- -------------------- ---- -------
----- ---------- - --- ------------------
----- - ------ - - -----------
-------------------------------------- - ------ ---------------- -- -
------ ----------------
------------ -- -
------------------
------------ -- -
-- --------- --- ------------- -
------------------ -------------
- ---- -
-------------------- ----------- -----
-
---
------------- -- -
-------------------
-- ------如上所示，我们调用了 fetch() 函数来获取数据，同时将 controller 对象的 signal 属性传递给它。然后，在 5 秒钟后，我们中止了该请求。
结论
AbortController 提供了一种简单而有效的方法来取消异步任务。它可以用于多种场景，包括取消 HTTP 请求，关闭 WebSocket 连接和中止耗时大的任务。使用 AbortController，我们可以提高应用程序的可靠性和稳定性，同时使代码更加清晰易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c9da09babaf620fb1950f