@esfx/cancelable 是一个被广泛使用的npm包，用于在JavaScript中实现cancellation 和 abortability 的功能。它可用于取消promise, setTimeout(), setInterval()等JavaScript中常用的任务。如果你正在寻找一个解决取消异步任务问题的库，@esfx/cancelable的功能能够满足你的需求。
安装
如果你想在你的项目中使用@esfx/cancelable,你需要首先安装它。在你的项目目录下运行以下命令即可。
npm install @esfx/cancelable
使用
使用@esfx/cancelable的方式非常简单。你可以在你的代码中引入@esfx/cancelable包, 以及下面的其他依赖库：
@esfx/async-canceltoken- 一个提供了可撤销功能的异步程序库@esfx/cancelable-dom- 一个提供了AbortController与事件监听绑定和请求的套件
在代码中引入上述依赖库,可以像这样使用 @esfx/cancelable:
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
-- ---- ---------------------------
----- ----------- - --- -----------------------------
----- ------- - --- ----------------- ------- -- -
------------- -- -
----------
-- -----
-------------------------------------
---
----------------------------- -- -
------------ --------
---
----- --------上述示例演示了如何使用Cancelable.TimeoutSource取消setTimeout()中的任务。这里我们定义了一个50ms的timeout, 当timeout超过50ms后, 我们使用token.source.cancel()方法取消setTimeout()。同时，我们还在 token.source 上挂载了一个reject行为，以便promise会执行reject操作。
你也可以使用Cancelable类来取消多个异步任务：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
----- ----------- - --- -------------------------------
----- -------- ------- -
----- --- --------------- -- ------------------- -------
----------------- ----
-
----- ----- - --- ----------------------- ------- -- -
----- --- - --- -----------------
--------------- ----------------------
-----------
---------------------- - -- -- -
-- --------------- --- --------- -
-- ----------- --- ---- -
------------------------------
----------
-
---- -
---------
-
-
--
-------------------------------------
---
----------------------------- -- -
--------------
---
----- ------------------------- --------在上述代码示例中，我们定义了两个异步任务 taskA与taskB, 我们使用 token.source.cancel()来取消 taskB, 在这里，taskB是一个XMLHTTPRequest调用.我们还使用 register()方法将此操作定义在token.source上。
在最后一行，我们使用了Cancelable.race()方法，其中的 Promise.race()是在所有 Promise 对象都resolved或者rejected后，返回 Promise 对象的执行结果中的一个绩效最快的 Promise 对象。这意味着，如果 taskA比taskB更快结束，我们将得到taskA返回的值，反之亦然。
取消了一些异步任务之后，是不是觉得ControlToken默认注册的"cancel()"事件不太方便。这时我们可以通过CancelRegistration来使用自定义的“取消”回调函数，例如：
-- -------------------- ---- ------- ------ - ---------- - ---- ------------------- ----- ---------- - --- ------------------ ----- ------ - ------------------ ------------------ - - --- -------- ----- -------------------- - -------------------- -- - ------------------ - - --- -------- -- ------ -- ------- -- ----------------------------------
在上述示例中，我们定义了一个AbortController，使用 signal.setTimeout()方法在2s之后显示当前时间。如果我们需要取消这个计时器，我们可以使用timedOutRegistration.unregister()，取消计时器执行。
总结
在JavaScript中取消异步任务是一个重要的主题，特别是当你处理大批量异步任务的时候。使用@esfx/cancelable包很容易实现异步操作的撤销与取消。本文中，我们讨论了 @esfx/cancelable包，介绍了它的基本用法，并提供了几个实际场景的示例。学完本文后，你将拥有足够的知识去在你的JavaScript代码中使用@esfx/cancelable包，并实现异步操作的撤销和取消。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/esfx-cancelable