ES9 提案:AbortController

ES9 提案中最受欢迎的一个功能是 AbortController。AbortController 允许我们在异步任务执行时来取消它们,从而提高应用程序的可靠性和稳定性。本文将详细介绍 AbortController 的用法和指导意义。

AbortController 的用法

AbortController 可以以如下方式实例化:

----- ---------- - --- ------------------

我们可以使用 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