在现代的 Web 应用程序中，前端的复杂性不断增加。在处理异步逻辑时，从 ES6 开始，JavaScript 开发人员可以使用 Promise 和 async/await 等工具来简化代码。但是，对于一些数据需要在线程之间共享的情况，前端开发人员可能需要一些更强大的工具来帮助他们实现这些功能。
在 ES12 中，引入了一个称为 AsyncLocalStorage 的新 API，可以轻松地在异步逻辑中实现数据共享和持久化，本文将详细介绍其使用方法和示例代码。
AsyncLocalStorage 的概述
AsyncLocalStorage 是一个新的全局对象，可以再异步逻辑中跨线程地存储和获取数据。它与 localStorage 不同，在第一次从 AsyncLocalStorage 中获取值时，该值将被存储在线程的上下文中，这意味着你可以将该值传递给其他异步函数，而不需要在每次函数调用时都进行显式传递。
AsyncLocalStorage 专门用于实现一些需要在线程之间共享数据的场景，例如在单线程的 Web Worker 中进行数据操作，或者在一个异步流程中操作一些共享状态。使用 AsyncLocalStorage，我们可以方便地在任何一个异步函数中存储数据，并在整个异步执行上下文中共享该数据。
使用 AsyncLocalStorage
首先，我们需要安装一个 polyfill，以便在不支持 AsyncLocalStorage 的浏览器中使用该 API。可以使用 async-local-storage 库来实现，该库可以通过 NPM 安装：
npm install async-local-storage
在使用 AsyncLocalStorage 之前，我们需要通过 AsyncLocalStorage 构造函数创建一个新的实例：
import { AsyncLocalStorage } from "async-local-storage";
const asyncLocalStorage = new AsyncLocalStorage();在创建实例之后，我们就可以使用 asyncLocalStorage 来存储和获取任何类型的值，例如字符串、对象或数组。我们可以使用 asyncLocalStorage.getStore() 来获取当前的存储，或者使用 asyncLocalStorage.run() 将该存储绑定到执行上下文中。
// 打印当前存储中的值
console.log(asyncLocalStorage.getStore());
// 将当前存储绑定到执行上下文并执行函数
asyncLocalStorage.run({ foo: "bar" }, async () => {
console.log(asyncLocalStorage.getStore()); // "{'foo':'bar'}"
});在上述代码中，我们使用 asyncLocalStorage.run() 将存储绑定到执行上下文中，并在该执行上下文中存储一个对象，该对象包含一个名为 foo 的属性和其值为 bar。我们随后通过 asyncLocalStorage.getStore() 获取存储，并将其打印到控制台上。
在异步上下文中，我们可以使用 asyncLocalStorage.get() 和 asyncLocalStorage.set() 分别对存储进行获取和设置。例如，以下示例代码演示了如何在异步上下文中同步访问该存储：
-- -------------------- ---- ------- ----------------------- ---- ----- -- ----- -- -- - ----- ----- - ----------------------------- ----------------------- -- ----- --------- - ------ ---------------------------------- ------------------------------------------ -- -------------- ------------- ---
在上述示例代码中，我们首先通过 asyncLocalStorage.run() 将存储绑定到异步上下文之后，在该异步上下文中同步访问该存储，并在存储中添加一个新的属性。正如我们所提到的，每次将存储传递给另一个异步函数可能会很麻烦，此时，我们可以通过 asyncLocalStorage.set() 方法来更轻松地更新存储对象。
AsyncLocalStorage 示例
以下代码示例演示了如何在异步逻辑中使用 AsyncLocalStorage。我们创建一个示例服务，该服务使用 AsyncLocalStorage 存储来自两个不同源的数据。每个数据源都需要进行异步访问，但是我们可以使用访问者函数来读取存储，并使用中间件函数将存储存储在执行上下文中。
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------
------ ----- ---- -------------
----- ----------------- - --- --------------------
----- ------------ - ----- -- -- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
--
----- ------------- - ----- -- -- -
----- -------- - ----- --------------------------------------------
----- ---- - ----- ----------------
------ -----
--
----- -------- - ----- ------ -- -
----- ------- - ---
------------------------------ ----- -- -- -
----- --------- - ----- ---------------
----- ---------- - ----- ----------------
----------------------------- - ---------- ---------- ---
-------
---
--
----- ------- - ----- ----- ---- -- -
----- ---- - ----- ------------------------------
---------------
--
----- --- - ----------
------------------
------------ ---------
---------------- -- -- -
------------------- ------- -- -----------------
---在上述示例代码中，我们通过 asyncLocalStorage.set() 将两个数据源存储到异步存储中，并使用中间件函数来将存储绑定到执行上下文中。随后，我们定义了一个访问者函数，该函数异步地从存储中读取数据，并使用 res.send() 方法将其发送回客户端。
最后，我们创建了一个 Node.js 服务器，并将 withData() 中间件和访问者函数与其绑定。然后，我们启动该服务器以便监听来自客户端的请求，并在访问时通过 asyncLocalStorage.get() 获取存储中的数据。
结论
在本文中，我们介绍了 ES12 中的 AsyncLocalStorage 实现以及与 localStorage 的区别，同时提供了使用示例和代码片段，以便更好地理解该 API 的使用方法。实际上，AsyncLocalStorage 是在异步编程中实现数据共享和持久性的最佳方法之一，尤其是在处理复杂的中间件或在 Web Workers 中执行任务时。因此，如果需要在异步代码中共享线程之间的数据，AsyncLocalStorage 绝对是你应该考虑的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6720e3aa2e7021665e050860