在前端开发中，有时需要在异步操作中取消请求或操作。而 npm 包 cancellation-token-source 可以帮助我们实现这一功能。本篇文章将介绍如何使用 cancellation-token-source 来实现取消异步操作的功能。
什么是 cancellation token？
cancellation token 是一个对象，用于控制异步操作的取消。当异步操作的执行者想要取消操作时，可以调用 cancellation token 的 cancel 方法，通知操作被取消。
安装和使用
首先，在项目中安装 cancellation-token-source 包：
--- ------- -------------------------
然后，我们就可以在项目中使用该包了。下面是使用该包的示例代码：
------ ----------------------- ---- ----------------------------
----- -------- ---------------- -
----- ----------- - ----- -- --- --------------------------------
--- -
----- -------- - ----- ------------------------------------- -
------- ------------------
---
----- ---- - ----- ----------------
------ -----
- ----- ------- -
-- ------------------------- -
-------------------- ----------- -------
- ---- -
----- ------
-
-
-
----- ----------- - --- --------------------------
----------------------------
---------- -- -------------------- ------
------------ -- ----------------------
------------- -- -
---------------------
-- ------在上述示例代码中，我们通过 CancellationTokenSource 类创建了一个 cancellation token，然后使用该 token 向远程 API 获取数据。如果在获取数据过程中，调用了 cancellation token 的 cancel 方法，那么获取数据的 promise 将被取消，控制权将抛给 catch 语句块。
深度解析
当我们创建了一个 cancellation token 后，它会为我们创建一个 controller 对象，该对象包含一个 signal 属性和一个 abort 方法。signal 属性是 AbortSignal 对象，用于通知操作是否被取消。我们在创建 request 的时候，把 signal 属性传给 fetch 函数，这样当 cancellation token 被取消时，signal 也会被设置为 abort 状态，从而取消 fetch 请求。
如果我们不传递 cancellation token 给异步操作，该类默认会创建一个新的 cancellation token。我们可以通过下述代码查看 cancellation token 对象和其中的属性和方法：
----- ----------- - --- -------------------------- ----- ----- - ------------------ ------------------- -- - -------- ------ -------- ----- ----------------- -- -------------------- -- -------------- ---- - --------------------------- -- -----
在我们的示例代码中，我们使用了 isCancelled 属性来检查操作是否被取消。该属性等同于 signal.aborted，即 cancellation token 的 signal 属性的 aborted 属性。
-- ------------------------------- - -------------------- ----------- ------- - ---- - ----- ------ -
指导意义
cancellation-token-source 包在处理异步操作时非常有用，使其能够更轻松地取消异步操作。使用该包可以避免出现各种繁琐的处理方案。例如，当用户在输入框中输入时，如果我们需要根据用户的输入结果来联想出结果并展示出来，那么在用户继续输入的过程中，我们可能不需要再进行联想展示，我们可以用 cancellation-token-source 简单地实现取消联想的操作，增加应用程序的用户体验。
总的来说，cancellation-token-source 包非常方便并且易于理解。它可用于在不同的异步操作场景下方便地取消该操作，并能从 catch 语句块中获取取消失败的操作原因。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f5d9381d61a3540e91