简介
在前端开发中，有时我们需要在请求过程中终止请求操作，这时候，@azure/abort-controller 就是一个十分有用的 npm 包，它提供了一种取消异步操作的方法。
如何安装
@azure/abort-controller 是一个 npm 包，可以使用 npm 或 yarn 进行安装：
--- ------- -----------------------
---- --- -----------------------
如何使用
@azure/abort-controller 包中，主要有两个类，分别是 AbortController 和 AbortSignal。
AbortController
AbortController 类用于控制一个或多个异步操作的执行，并在需要时取消它们。它提供两个方法：
abort()：取消控制器中的异步操作。signal()：返回一个与此AbortController关联的AbortSignal对象。
下面是一个示例，演示如何使用 AbortController 控制器控制一个异步操作：
------ - --------------- - ---- -------------------------- ----- ---------- - --- ------------------ ----- ------- - --- ----------------- ------- -- - ------------- -- ----------------- ------ --- -------------------- -- - ------------------- ---------- -- - --------------- --- ------------- -- - ------------------- ---------------------- -- ----------- -- -----
这里我们创建了一个 AbortController 实例，并使用 signal() 方法获取一个 AbortSignal 对象。然后我们使用 setTimeout() 函数模拟了一个异步操作，这个异步操作会在一秒钟后返回结果。我们将这个操作的 Promise 对象中的逻辑写在了 promise.then() 函数中。
在 500 毫秒后，我们使用 controller.abort() 函数取消控制器中的异步操作，并且打印出 “operation is aborted.”。
由于 promise 已经超时了，所以它会被抛弃。在 promise.then() 函数中的逻辑不会被执行。此时可以在控制台中看到 “AbortError” 异常信息。
AbortSignal
AbortSignal 类用于表示取消操作的信号。当调用 AbortController 实例的 abort() 方法时，AbortSignal 对象就会发出取消信号。
下面是一个示例，演示如何使用 AbortSignal 监听 AbortController 实例中的取消信号。
------ - --------------- - ---- --------------------------
----- ---------- - --- ------------------
----- ------ - ------------------
-------------------------------- -- -- -
---------------------- -- -----------
---
----- ------- - --- ----------------- ------- -- -
------------- -- -
-- ----------------- -
-----------------
-
-- ------
---
-------------------- -- -
-------------------
---------- -- -
---------------
---
------------- -- -
-------------------
-- -----这里我们创建了一个 AbortController 实例，并使用 signal() 方法获取一个 AbortSignal 对象。然后我们使用 setTimeout() 函数模拟了一个异步操作，这个异步操作会在一秒钟后返回结果。我们将这个操作的 Promise 对象中的逻辑写在了 promise.then() 函数中。
我们还使用 signal.addEventListener() 函数监听了 AbortSignal 对象的 abort 事件，并在事件回调函数中打印了日志。
在 500 毫秒后，我们使用 controller.abort() 函数取消控制器中的异步操作，并且打印出 “operation is aborted.”。
由于 promise 的执行时间还没有到，所以它会在一秒钟后正常返回结果。此时可以在控制台中看到输出的 “done!”。
总结
@azure/abort-controller 包提供了一种取消异步操作的方法。在前端开发中经常需要使用，可以有效地避免因为用户操作而导致的不必要的异步请求，提升用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaabdb5cbfe1ea0610577