前言
在前端开发中，我们经常会遇到一些任务需要异步处理，如发送请求、执行动画等。通常情况下，我们会使用promise或者async/await来处理异步任务。然而在实际开发过程中，有时我们需要取消某个或某些正在执行的异步任务，而这时候就需要用到取消令牌（CancellationToken）。
今天我们来介绍一个npm包——@esfx/async-canceltoken，它提供了一种简单、轻量但强大的取消令牌方案。
安装
npm install @esfx/async-canceltoken --save
使用
-- -------------------- ---- ------- ------ - ------------------ ----------- - ---- -------------------------- ----- -------- ------------ - -- ------ ------------------ -- - --------------------- --- -- -------------------- --- ---- - - -- - - --- ---- - ----- --- --------------- -- ------------- -- ---------- ------ --------------------- - ------- -- -------- -- ---------------- - --------------------- ----- --- -------------- - - --------------------- -展开代码
代码中，我们定义了一个名为myJob的异步函数，它的参数token是取消令牌。在异步函数中，我们可以通过监听令牌的cancel事件来实现任务的取消。当令牌被标记为已取消时，我们就可以抛出一个特定的错误CancelError来中断任务的执行。
下面是一个使用例子：
const tokenSource = new CancellationToken(); const task = myJob(tokenSource.token); setTimeout(() => { console.log('5秒钟已过'); tokenSource.cancel(); }, 5000);
在代码中，我们创建了一个CancellationToken实例来生成取消令牌。通过调用cancel方法，我们可以在任务运行时取消任务的执行。
深入理解
@esfx/async-canceltoken将取消令牌抽象成了一个对象，通过该对象我们可以实现灵活的异步任务控制。接下来我们详细了解其中的一些概念和设计。
CancelableSource
这是一个CancellationTokenSource的别名，它是一个可被取消的资源。如果我们只是想声明一个取消令牌，可以使用CancellationToken的静态方法create。
const token = CancellationToken.create();
如果我们需要可以取消的令牌资源，并且在令牌取消时希望有一些附加的清理工作，那么就可以使用CancelableSource。
const source = new CancellationTokenSource(); const token = source.token; // 在取消时执行一些清理工作 source.subscribe(() => { console.log('资源被释放'); });
CancellationToken
CancellationToken是我们使用@esfx/async-canceltoken包时最常用的类之一，它代表一个还未被取消的取消令牌。当我们不再需要取消令牌时，应该将其标记为已取消。
token.cancel();
当令牌全部被取消时，会发出一个cancel事件。
token.subscribe(() => { console.log('任务已取消'); });
如果我们需要检查取消令牌的状态，可以使用signaled属性：
if (token.signaled) { console.log('任务被取消'); throw new CancelError(); }
CancelError
CancelError是一种错误类型，当任务因为取消而被中断时可以抛出。这里的取消指的是通过取消令牌而中断的任务。
if (token.signaled) { console.log('任务被取消'); throw new CancelError(); }
结论
@esfx/async-canceltoken是一个强大的npm包，它提供了一个轻量且优雅的取消令牌方案，允许我们在异步任务执行期间动态地取消任务。希望本文对您学习和使用@esfx/async-canceltoken有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef9c9b6403f2923b035ba03
