各位观众，晚上好！今天给大家带来一场关于 JavaScript Async Context 提案中 Cancellation Token Propagation 的讲座，主题是：跨异步操作取消。别担心，听起来高大上，其实原理简单易懂，保证让各位听完之后，感觉自己也能参与到 TC39 的提案讨论中去了。
(开场白：先聊点儿“取消”的家常)
在开始正题之前，咱们先来聊聊生活中的“取消”。 比如，你点了份外卖，结果半小时过去了还没送到，你可能想取消订单。或者，你下载一个大型游戏，眼看进度条走了 99%，突然发现流量不够了，你也想取消下载。
在编程世界里，“取消”同样重要。比如，一个用户在搜索框输入关键词，你发起了一个网络请求去获取搜索结果。如果用户手速飞快，立马又修改了关键词，那你之前发起的请求就变得毫无意义，应该立即取消，释放资源。
（进入正题：异步操作的取消难题）
在同步的世界里，取消操作相对简单。 就像你正在执行一个循环，突然想停止，直接 break 就行了。 但是，在异步的世界里，事情就变得复杂起来。 因为异步操作通常涉及多个函数调用，甚至跨越多个模块。 那么，如何才能优雅地取消一个正在进行的异步操作链呢？
这就是 Cancellation Token Propagation 要解决的核心问题。 简单来说，就是如何在异步操作链中传递一个“取消信号”，让所有相关的操作都能及时停止。
（Async Context 提案简介：为“取消”打下基础）
在深入 Cancellation Token Propagation 之前，我们需要先简单了解一下 Async Context 提案。 为什么呢？ 因为 Cancellation Token Propagation 是基于 Async Context 构建的。
Async Context 提供了一种在异步操作链中传递数据的机制，就像给每个异步操作都贴上了一个“标签”，方便我们访问和修改这些数据。
你可以把 Async Context 想象成一个“隐式参数”，它会自动在异步操作链中传递，不需要我们显式地传递。
（Cancellation Token：取消信号的载体）
现在，我们来介绍 Cancellation Token。 Cancellation Token 就是一个对象，它负责携带“取消信号”。 当我们想要取消一个异步操作时，我们会“触发” Cancellation Token，让它发出“取消信号”。
class CancellationToken {
constructor() {
this.isCancelled = false;
this.listeners = [];
}
cancel() {
this.isCancelled = true;
this.listeners.forEach(listener => listener());
}
subscribe(listener) {
this.listeners.push(listener);
return () => {
this.listeners = this.listeners.filter(l => l !== listener);
};
}
}这个 CancellationToken 类很简单，它有三个关键属性/方法：
isCancelled: 一个布尔值，表示是否已被取消。cancel(): 一个方法，用于触发取消信号。subscribe(listener): 一个方法，用于注册一个监听器，当取消信号被触发时，该监听器会被调用。
（Cancellation Token Propagation：取消信号的传递）
有了 Cancellation Token 之后，我们就可以开始实现 Cancellation Token Propagation 了。 关键在于，如何在异步操作链中传递 Cancellation Token，并让每个操作都能监听 Cancellation Token 的取消信号。
这就需要用到 Async Context 了。 我们可以把 Cancellation Token 存储在 Async Context 中，这样，在异步操作链中的任何地方，都可以访问到 Cancellation Token。
import { AsyncLocalStorage } from 'async_hooks';
const cancellationTokenStorage = new AsyncLocalStorage();
function runWithCancellationToken(cancellationToken, fn) {
return cancellationTokenStorage.run(cancellationToken, fn);
}
function getCancellationToken() {
return cancellationTokenStorage.getStore();
}这里我们使用了 async_hooks 模块中的 AsyncLocalStorage 类，创建了一个 cancellationTokenStorage 对象。 AsyncLocalStorage 提供了一种在异步操作链中存储数据的机制。
runWithCancellationToken(cancellationToken, fn): 这个函数用于在一个特定的 Cancellation Token 上下文中执行一个函数。getCancellationToken(): 这个函数用于获取当前 Cancellation Token 上下文的 Cancellation Token。
（示例：一个简单的异步操作链）
为了更好地理解 Cancellation Token Propagation，我们来看一个简单的示例：
async function task1(delay) {
const cancellationToken = getCancellationToken();
return new Promise((resolve, reject) => {
if (cancellationToken && cancellationToken.isCancelled) {
return reject(new Error('Task cancelled before start'));
}
let unsubscribe;
if (cancellationToken) {
unsubscribe = cancellationToken.subscribe(() => {
clearTimeout(timeoutId);
reject(new Error('Task cancelled'));
});
}
const timeoutId = setTimeout(() => {
if (unsubscribe) {
unsubscribe(); // 清理监听器
}
resolve('Task 1 completed');
}, delay);
});
}
async function task2(delay) {
const cancellationToken = getCancellationToken();
return new Promise((resolve, reject) => {
if (cancellationToken && cancellationToken.isCancelled) {
return reject(new Error('Task cancelled before start'));
}
let unsubscribe;
if (cancellationToken) {
unsubscribe = cancellationToken.subscribe(() => {
clearTimeout(timeoutId);
reject(new Error('Task cancelled'));
});
}
const timeoutId = setTimeout(() => {
if (unsubscribe) {
unsubscribe(); // 清理监听器
}
resolve('Task 2 completed');
}, delay);
});
}
async function main() {
const cancellationToken = new CancellationToken();
runWithCancellationToken(cancellationToken, async () => {
try {
console.log('Starting tasks...');
const result1 = await task1(1000);
console.log(result1);
const result2 = await task2(2000);
console.log(result2);
} catch (error) {
console.error('Error:', error.message);
}
});
// 200ms后取消任务
setTimeout(() => {
console.log('Cancelling tasks...');
cancellationToken.cancel();
}, 200);
}
main();在这个示例中，我们定义了两个异步任务 task1 和 task2。 这两个任务都会延迟一段时间后完成。 我们还定义了一个 main 函数，它负责启动这两个任务，并在 200 毫秒后取消它们。
关键在于，我们在 runWithCancellationToken 函数中执行 main 函数，并将 Cancellation Token 传递给它。 这样，在 task1 和 task2 函数中，我们就可以通过 getCancellationToken() 函数获取到 Cancellation Token，并监听它的取消信号。
当 Cancellation Token 被取消时，task1 和 task2 函数会立即停止，并抛出一个错误。
（代码解释：逐行剖析）
我们来逐行剖析一下这个示例的代码：
const cancellationToken = getCancellationToken();：在task1和task2函数中，我们首先通过getCancellationToken()函数获取到 Cancellation Token。cancellationToken.subscribe(() => { ... });：然后，我们通过cancellationToken.subscribe()函数注册一个监听器，当取消信号被触发时，该监听器会被调用。clearTimeout(timeoutId);：在监听器中，我们首先清除setTimeout函数设置的定时器，防止任务继续执行。reject(new Error('Task cancelled'));：然后，我们抛出一个错误，表示任务被取消。setTimeout(() => { ... }, 200);：在main函数中，我们使用setTimeout函数在 200 毫秒后取消任务。cancellationToken.cancel();：通过调用cancellationToken.cancel()函数，触发取消信号。
（运行结果：意料之中的取消）
运行这段代码，你会看到如下输出：
Starting tasks...
Cancelling tasks...
Error: Task cancelled可以看到，在 task1 完成之前，任务就被取消了。 这是因为我们在 200 毫秒后取消了任务，而 task1 需要 1000 毫秒才能完成。
（更复杂的场景：多层嵌套的异步操作）
上面的示例只是一个简单的异步操作链。 在实际开发中，我们可能会遇到更复杂的场景，比如多层嵌套的异步操作。
async function task3(delay) {
const cancellationToken = getCancellationToken();
return new Promise((resolve, reject) => {
if (cancellationToken && cancellationToken.isCancelled) {
return reject(new Error('Task cancelled before start'));
}
let unsubscribe;
if (cancellationToken) {
unsubscribe = cancellationToken.subscribe(() => {
clearTimeout(timeoutId);
reject(new Error('Task cancelled'));
});
}
const timeoutId = setTimeout(() => {
if (unsubscribe) {
unsubscribe(); // 清理监听器
}
resolve('Task 3 completed');
}, delay);
});
}
async function task2(delay) {
const cancellationToken = getCancellationToken();
return new Promise((resolve, reject) => {
if (cancellationToken && cancellationToken.isCancelled) {
return reject(new Error('Task cancelled before start'));
}
let unsubscribe;
if (cancellationToken) {
unsubscribe = cancellationToken.subscribe(() => {
clearTimeout(timeoutId);
reject(new Error('Task cancelled'));
});
}
const timeoutId = setTimeout(() => {
if (unsubscribe) {
unsubscribe(); // 清理监听器
}
task3(delay * 0.5) // 调用task3
.then(resolve)
.catch(reject);
}, delay);
});
}
async function main() {
const cancellationToken = new CancellationToken();
runWithCancellationToken(cancellationToken, async () => {
try {
console.log('Starting tasks...');
const result1 = await task1(1000);
console.log(result1);
const result2 = await task2(2000);
console.log(result2);
} catch (error) {
console.error('Error:', error.message);
}
});
// 500ms后取消任务
setTimeout(() => {
console.log('Cancelling tasks...');
cancellationToken.cancel();
}, 500);
}
main();在这个示例中，task2 函数内部调用了 task3 函数。 Cancellation Token Propagation 依然可以正常工作，因为 Cancellation Token 会自动在异步操作链中传递。
（兼容性考虑：polyfill 的必要性）
虽然 Async Context 提案已经进入 Stage 3，但目前还没有被所有浏览器和 Node.js 版本支持。 因此，在实际开发中，我们可能需要使用 polyfill 来提供兼容性。
有很多现成的 Async Context polyfill 可以使用，比如 alscontext。 你可以根据自己的需求选择合适的 polyfill。
（表格总结：Cancellation Token Propagation 的优势）
为了更好地总结 Cancellation Token Propagation 的优势，我们使用一个表格来对比一下传统的取消方式和 Cancellation Token Propagation：
| 特性 | 传统取消方式 | Cancellation Token Propagation |
|---|---|---|
| 取消信号传递 | 需要手动传递取消信号，容易出错 | 自动传递取消信号，无需手动干预 |
| 代码复杂度 | 代码复杂，容易出现回调地狱 | 代码简洁，易于维护 |
| 适用场景 | 适用于简单的异步操作链 | 适用于复杂的异步操作链，特别是多层嵌套的异步操作 |
| 资源释放 | 需要手动释放资源，容易忘记 | 可以自动释放资源，避免内存泄漏 |
| 错误处理 | 需要手动处理取消错误，容易遗漏 | 可以统一处理取消错误，提高代码的健壮性 |
（最佳实践：一些建议）
在使用 Cancellation Token Propagation 时，可以遵循以下最佳实践：
- 尽早检查取消状态：在异步操作的开始阶段，立即检查 Cancellation Token 的取消状态，如果已被取消，则立即停止操作。
- 及时清理监听器：在异步操作完成或被取消时，及时清理 Cancellation Token 的监听器，防止内存泄漏。
- 统一处理取消错误：定义一个统一的取消错误类型，方便错误处理。
- 使用合适的 polyfill：根据自己的需求选择合适的 Async Context polyfill。
（未来展望：与 AbortController 的结合）
Cancellation Token Propagation 可以与 AbortController 结合使用，提供更强大的取消功能。 AbortController 是 Web API 中用于取消 DOM 操作（比如 fetch 请求）的一个接口。
async function fetchData(url, cancellationToken) {
const controller = new AbortController();
const signal = controller.signal;
if (cancellationToken) {
cancellationToken.subscribe(() => {
controller.abort();
});
}
try {
const response = await fetch(url, { signal });
return await response.json();
} catch (error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
throw error;
}
}
}在这个示例中，我们将 Cancellation Token 与 AbortController 结合使用，可以取消 fetch 请求。
（总结：让“取消”不再是难题）
通过今天的讲座，相信各位已经对 JavaScript Async Context 提案中的 Cancellation Token Propagation 有了更深入的了解。 Cancellation Token Propagation 提供了一种优雅、高效的方式来取消异步操作，让“取消”不再是难题。
掌握 Cancellation Token Propagation，可以帮助我们编写更健壮、更高效的 JavaScript 代码。
感谢各位的观看！ 希望今天的讲座对大家有所帮助。 如果有什么问题，欢迎在评论区留言。
(结束语：一起期待更美好的 JavaScript)
JavaScript 正在不断发展和完善，Async Context 提案和 Cancellation Token Propagation 就是其中的一部分。 让我们一起期待更美好的 JavaScript！