在现代 Web 应用程序中，异步操作是非常常见的。比如，我们可能会使用 fetch API 来获取数据，或者使用 WebSocket API 来建立实时连接。通常情况下，我们希望在这些异步操作执行期间能够取消或停止它们。在 JavaScript ES11 中，引入了 AbortSignal 接口来实现这个功能。本文将详细介绍 AbortSignal 的用法和示例代码。
什么是 AbortSignal？
AbortSignal 是一个接口，它可以用来终止异步操作。AbortSignal 接口有两个属性：aborted 和 onabort。aborted 属性是一个只读的布尔值，表示操作是否已被终止。onabort 属性是一个函数，当操作被终止时，该函数将被调用。
如何使用 AbortSignal？
要使用 AbortSignal，我们需要在异步操作中创建一个 AbortController 对象。AbortController 是一个控制器对象，它包含一个 signal 属性，该属性是一个 AbortSignal 对象。当我们想要终止异步操作时，只需要调用 AbortController 的 abort() 方法即可。
下面是一个示例代码，展示了如何使用 AbortSignal 终止 fetch 请求：
-- -------------------- ---- -------
----- ---------- - --- ------------------
----- ------ - ------------------
------------------ - ------ --
-------------- -- ----------------
---------- -- -
-- ----
--
------------ -- -
-- ----------- --- ------------- -
----------------------
- ---- -
---------------------
-
---
-- ----
------------- -- -
-------------------
-- ------在上面的代码中，我们首先创建了一个 AbortController 对象，并从中获取 signal 属性。然后，我们使用 fetch API 发送了一个异步请求，并将 signal 属性作为其配置的一部分传递给它。最后，我们在 5 秒钟后使用 abort() 方法终止了请求。如果请求在终止之前完成，我们将收到一个包含响应数据的 JSON 对象。否则，我们将收到一个 AbortError 对象。
AbortSignal 的实际应用
AbortSignal 可以应用于多种情况。下面是一些实际应用的示例：
取消 WebSocket 连接
使用 WebSocket API 建立的连接通常需要一些时间来建立。如果用户在连接建立之前离开了页面，我们可能希望取消连接。可以使用 AbortSignal 来实现这一点。下面是一个示例代码：
-- -------------------- ---- ------- ----- ---------- - --- ------------------ ----- ------ - ------------------ ----- -- - --- ------------------------------ - ------ --- -- ------ --------------------------- ----- -- - -- ---- --- -- ------ ---------------------------- ----- -- - -- ---- --- -- -------- ---------------------------- ----- -- - -- ---- --- -- ---- ------------- -- - ------------------- -- ------
在上面的代码中，我们使用 AbortController 和 AbortSignal 来控制 WebSocket 连接。如果连接在 5 秒钟内没有建立，我们将使用 abort() 方法终止连接。
取消动画和定时器
在 Web 应用程序中，我们经常使用动画和定时器来创建交互效果。有时，我们可能希望在用户交互时取消这些效果。可以使用 AbortSignal 来实现这一点。下面是一个示例代码：
-- -------------------- ---- ------- ----- ---------- - --- ------------------ ----- ------ - ------------------ -- ---- ----- --------- - ------------------------------- -- - -- ---- --- -- ----- ----- ----- - -------------------- -- - -- ----- -- ------ -- -------- ------------- -- - ------------------- -- ------ -------------------------------- ----- -- - --------------------------------------- --------------------------- ---
在上面的代码中，我们使用 AbortController 和 AbortSignal 来控制动画和定时器。如果用户在 1 秒钟内与页面交互，我们将使用 abort() 方法终止动画和定时器。同时，我们在 onabort 函数中取消动画和定时器。
总结
AbortSignal 是一个非常有用的接口，它可以帮助我们在异步操作执行期间终止操作。在本文中，我们介绍了 AbortSignal 的用法和示例代码，并展示了它在实际应用中的一些用途。如果您想要在您的 Web 应用程序中实现取消异步操作的功能，那么 AbortSignal 就是一个很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66014198d10417a222c6bb2a