JS `Async Context` (提案) `Call Stack` `Capture` 与 `Propagation` 机制

各位观众老爷，大家好！今天咱们来聊聊 JavaScript 里那些“玄学”但又非常重要的东西：Async Context (异步上下文)，以及它背后的 Call Stack (调用栈) 、Capture (捕获) 和 Propagation (传播) 机制。

准备好了吗？ 咱们开始！

第一幕： 什么是 Async Context? 别慌，先来点概念热身

想象一下，你在一家繁忙的咖啡馆里点了一杯咖啡。 你（context）告诉服务员（function call）你要一杯拿铁（data），然后你就去别的地方溜达了（asynchronous operation）。 过了五分钟，你的咖啡做好了，服务员大声喊：“您的拿铁好了！”。

问题来了：服务员怎么知道这杯咖啡是你的，而不是别人的？ 他们肯定记住了某种 "上下文"，例如你的脸、你的桌号等等。

在 JavaScript 的世界里，Async Context 就像咖啡馆的服务员记住的那些信息。 它允许异步操作（比如 setTimeout、fetch）在稍后执行时，仍然能够访问到它被调用时的 “上下文”。

为啥我们需要 Async Context？

假设我们想追踪一个用户的请求 ID，并把它打印到每个日志里。没有 Async Context，这会变得很麻烦，我们需要手动把 request ID 像参数一样传递给每个函数。有了 Async Context，我们就可以在请求开始时设置好 request ID，然后在任何地方直接访问，而不需要显式地传递。

第二幕： Call Stack (调用栈) — 程序执行的足迹

在深入 Async Context 之前，我们需要先了解 Call Stack。 这玩意儿就像一个叠盘子的架子。每当你调用一个函数，就会把一个“盘子”（stack frame）放到架子上。当函数执行完毕，就把盘子从架子上拿走。

来看个例子：

function greet(name) {
  console.log(`Hello, ${name}!`);
  sayGoodbye(name);
}

function sayGoodbye(name) {
  console.log(`Goodbye, ${name}!`);
}

greet("Alice");

执行这段代码时，Call Stack 的变化如下：

1. 刚开始: Call Stack 是空的。
2. 调用 greet("Alice"): greet 的 stack frame 被推入 Call Stack。
3. greet 执行 console.log: console.log 的 stack frame 被推入 Call Stack (很快又被弹出，因为 console.log 很快执行完)。
4. greet 调用 sayGoodbye("Alice"): sayGoodbye 的 stack frame 被推入 Call Stack。
5. sayGoodbye 执行 console.log: console.log 的 stack frame 被推入 Call Stack (同样很快弹出)。
6. sayGoodbye 执行完毕: sayGoodbye 的 stack frame 从 Call Stack 中弹出。
7. greet 执行完毕: greet 的 stack frame 从 Call Stack 中弹出。
8. 结束: Call Stack 再次为空。

第三幕：Capture (捕获) — 保存那一刻的美好

Capture 指的是在异步操作创建时，把当前 Async Context 的状态保存下来。 这就像给咖啡馆服务员拍照，记录下你当时的样子和桌号。

例如，如果我们使用 AsyncLocalStorage （一种常见的 Async Context 实现），我们可以在异步操作创建时，捕获当前存储在 AsyncLocalStorage 里的值。

第四幕：Propagation (传播) — 将记忆传递下去

Propagation 指的是在异步操作执行时，把之前 Capture 的 Async Context 恢复到当前执行环境中。 这就像服务员找到你，然后告诉你：“这是您的拿铁，桌号是 X”。

当异步操作执行时，会首先检查是否有之前 Capture 的 Async Context。 如果有，它会把这个 Context 恢复到当前的执行环境中，这样异步操作就可以访问到它被创建时的状态了。

第五幕： AsyncLocalStorage — 一个实用的 Async Context 工具

AsyncLocalStorage 是 Node.js 提供的一个用于管理 Async Context 的模块。 它可以让你在异步操作之间共享数据，而不需要显式地传递。

const { AsyncLocalStorage } = require('async_hooks');

const asyncLocalStorage = new AsyncLocalStorage();

function logWithContext(message) {
  const context = asyncLocalStorage.getStore();
  const requestId = context ? context.requestId : 'N/A';
  console.log(`[Request ID: ${requestId}] ${message}`);
}

function handleRequest(req, res) {
  const requestId = Math.random().toString(36).substring(7); // 生成随机 request ID

  asyncLocalStorage.run({ requestId }, () => {
    logWithContext('Request started');

    setTimeout(() => {
      logWithContext('Processing request...');
      res.end('Request processed');
      logWithContext('Request finished');
    }, 100);
  });
}

// 模拟请求处理
const fakeReq = {};
const fakeRes = {
  end: (message) => console.log(`Response: ${message}`)
};

handleRequest(fakeReq, fakeRes);

在这个例子中，handleRequest 函数在 asyncLocalStorage.run() 的回调函数中执行。 asyncLocalStorage.run() 会创建一个新的 Async Context，并把 requestId 存进去。

在 setTimeout 的回调函数中，我们可以通过 asyncLocalStorage.getStore() 来访问到 requestId。 即使 setTimeout 是一个异步操作，它仍然可以访问到 requestId，因为 AsyncLocalStorage 负责了 Capture 和 Propagation。

AsyncLocalStorage 的工作流程：

1. asyncLocalStorage.run(store, callback):
   • 创建一个新的 Async Context，并把 store （这里是 { requestId }） 存到这个 Context 里。
   • 执行 callback 函数。
2. asyncLocalStorage.getStore():
   • 获取当前 Async Context。
   • 如果当前没有 Async Context，返回 undefined。
   • 否则，返回当前 Async Context 的 store。

第六幕： 深入理解 Capture 和 Propagation

为了更好地理解 Capture 和 Propagation，我们来看一个更复杂的例子，涉及多个异步操作：

const { AsyncLocalStorage } = require('async_hooks');

const asyncLocalStorage = new AsyncLocalStorage();

function logWithContext(message) {
  const context = asyncLocalStorage.getStore();
  const requestId = context ? context.requestId : 'N/A';
  console.log(`[Request ID: ${requestId}] ${message}`);
}

async function processData(data) {
  logWithContext(`Processing data: ${data}`);
  await delay(50); // 模拟耗时操作
  logWithContext(`Data processed: ${data}`);
  return `Processed ${data}`;
}

async function handleRequest(req, res) {
  const requestId = Math.random().toString(36).substring(7);

  asyncLocalStorage.run({ requestId }, async () => {
    logWithContext('Request started');

    try {
      const result = await processData('Some important data');
      res.end(result);
      logWithContext('Request finished');
    } catch (error) {
      console.error('Error processing request:', error);
      res.statusCode = 500;
      res.end('Internal Server Error');
    }
  });
}

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 模拟请求处理
const fakeReq = {};
const fakeRes = {
  end: (message) => console.log(`Response: ${message}`),
  statusCode: 200
};

handleRequest(fakeReq, fakeRes);

在这个例子中，processData 函数使用了 async/await。 await delay(50) 会创建一个新的 Promise，这是一个异步操作。

发生了什么？

1. handleRequest 调用 asyncLocalStorage.run()，创建一个新的 Async Context，并设置 requestId。
2. logWithContext('Request started') 打印带有 requestId 的日志。
3. await processData('Some important data') 调用 processData 函数。
4. processData 函数内部的 logWithContext 打印带有 requestId 的日志。
5. await delay(50) 创建一个新的 Promise。 关键点：在 Promise 创建的时候，AsyncLocalStorage 会自动捕获当前的 Async Context (包括 requestId)。
6. delay(50) 的 setTimeout 执行完毕后，Promise resolve。 在 Promise resolve 的时候，AsyncLocalStorage 会自动传播之前捕获的 Async Context，使得 setTimeout 的回调函数可以访问到 requestId。
7. processData 函数继续执行，logWithContext('Data processed...') 打印带有 requestId 的日志。
8. handleRequest 函数继续执行，res.end(result) 发送响应。
9. logWithContext('Request finished') 打印带有 requestId 的日志。

用表格来总结一下 Capture 和 Propagation:

操作	发生时间	谁负责	效果
Capture (捕获)	异步操作（例如 Promise, setTimeout）创建时	AsyncLocalStorage (或其他 Async Context 实现)	保存当前 Async Context (包括存储的数据)
Propagation (传播)	异步操作执行时	AsyncLocalStorage (或其他 Async Context 实现)	恢复之前捕获的 Async Context，使得异步操作可以访问到它被创建时的上下文。

第七幕： Async Context 的应用场景

Async Context 在很多场景下都非常有用，例如：

• Tracing (链路追踪): 在分布式系统中，可以使用 Async Context 来追踪请求的整个生命周期，记录每个服务的调用链。
• Logging (日志记录): 在每个日志里自动添加请求 ID、用户 ID 等信息。
• Authentication (身份验证): 在异步操作中访问当前用户的身份信息。
• Internationalization (国际化): 在异步操作中访问用户的语言设置。
• Transaction Management (事务管理): 在数据库操作中，保证事务的上下文正确传递。

第八幕： 总结与注意事项

• Async Context 允许异步操作访问它被创建时的上下文。
• Call Stack 记录了程序执行的函数调用链。
• Capture 保存 Async Context 的状态。
• Propagation 恢复 Async Context 的状态。
• AsyncLocalStorage 是 Node.js 提供的一个用于管理 Async Context 的模块。
• Async Context 可以简化异步编程，提高代码的可维护性和可读性。

注意事项：

• 过度使用 Async Context 可能会导致性能问题，因为它会增加内存消耗。
• 在使用 Async Context 时，要仔细考虑数据的生命周期，避免出现数据泄露。
• 不同的 Async Context 实现可能有不同的行为，需要仔细阅读文档。

第九幕： 结尾彩蛋 (一些额外的思考)

Async Context 是一种强大的工具，但它也增加了代码的复杂性。 在使用 Async Context 之前，要仔细评估是否真的需要它。 有时候，显式地传递参数可能更简单、更清晰。

另外，随着 JavaScript 的发展，未来可能会出现更多、更强大的 Async Context 实现。 让我们拭目以待！

好了，今天的讲座就到这里。 希望大家对 Async Context 有了更深入的理解。 谢谢大家！