JS `Top-level await` (ES2022)：模块顶层异步操作的执行顺序与依赖

大家好，今儿咱聊聊顶层 `await` 这事儿！

各位观众老爷们，大家好！今儿咱不聊别的，就来唠唠 JavaScript 里头那个让人又爱又恨，用好了能上天，用不好就卡壳的 top-level await。这玩意儿自从 ES2022 出来后，算是正式转正了，能直接在模块的最顶层用了。但是，这玩意儿可不是随便用的，搞不好你的代码就跟得了便秘似的，怎么都跑不顺溜。所以，今天咱就来好好扒一扒这 top-level await 的执行顺序和依赖关系，让大家伙儿彻底明白它是个什么脾气。

啥是顶层 `await`？

简单来说，以前 await 只能在 async 函数里用，你要是在模块的顶层直接 await 一个 Promise，那 JavaScript 引擎肯定跟你翻脸。但是现在不一样了，ES2022 允许你在模块的最顶层直接使用 await。

// 以前不行，现在可以！
// moduleA.js
import { fetchData } from './dataService.js';

console.log("开始加载数据...");
const data = await fetchData(); // 顶层 await
console.log("数据加载完成:", data);

export { data };

这看起来好像挺方便的，直接在模块里就能等待异步操作完成，不用再包一层 async 函数。但是，水能载舟亦能覆舟，用不好就容易出幺蛾子。

执行顺序：谁先谁后？

top-level await 最让人头疼的就是它的执行顺序。它会影响整个模块的加载和执行过程，甚至会影响到其他模块的加载。为了搞清楚这个顺序，咱们得先了解一下 JavaScript 模块的加载过程。

JavaScript 模块的加载主要分三个阶段：

构建 (Construction): 找到模块，下载并解析代码，创建模块记录。
实例化 (Instantiation): 为模块分配内存空间，创建模块的导出和导入列表，将模块的导出和导入与其他模块链接起来。注意，这个时候还没有执行代码！
求值 (Evaluation): 执行模块的代码，初始化变量，执行函数等。

top-level await 主要影响的是求值 (Evaluation) 这个阶段。当 JavaScript 引擎遇到 top-level await 时，它会暂停当前模块的执行，直到 await 的 Promise resolve 或者 reject。在这期间，JavaScript 引擎可以去执行其他的模块。

重点来了：

如果一个模块 A 使用了 top-level await，那么模块 A 的执行会被暂停，直到 await 的 Promise 完成。
在这期间，如果其他模块 B 依赖于模块 A 的导出，那么模块 B 也会被暂停执行，直到模块 A 的 await 完成，导出可用。
如果多个模块之间存在循环依赖，并且都使用了 top-level await，那么可能会导致死锁，程序永远卡在那里。

咱们用代码来演示一下：

// moduleA.js
import { moduleBValue } from './moduleB.js';

console.log("moduleA: 开始执行...");
const data = await new Promise(resolve => setTimeout(() => {
  console.log("moduleA: Promise resolved!");
  resolve("我是 moduleA 的数据");
}, 2000));

console.log("moduleA: 接收到 moduleB 的值:", moduleBValue);
export const moduleAValue = data;
console.log("moduleA: 执行完毕");

// moduleB.js
import { moduleAValue } from './moduleA.js';

console.log("moduleB: 开始执行...");
const data = await new Promise(resolve => setTimeout(() => {
  console.log("moduleB: Promise resolved!");
  resolve("我是 moduleB 的数据");
}, 1000));

console.log("moduleB: 接收到 moduleA 的值:", moduleAValue);
export const moduleBValue = data;
console.log("moduleB: 执行完毕");

// index.js
import { moduleAValue } from './moduleA.js';
import { moduleBValue } from './moduleB.js';

console.log("index: 开始执行...");
console.log("index: moduleA 的值:", moduleAValue);
console.log("index: moduleB 的值:", moduleBValue);
console.log("index: 执行完毕");

大家伙儿可以自己跑一下这段代码，看看输出结果。你会发现，执行顺序是这样的：

index: 开始执行...
moduleA: 开始执行...
moduleB: 开始执行...
moduleB: Promise resolved!
(等待 moduleA 的 Promise)
moduleA: Promise resolved!
moduleA: 接收到 moduleB 的值: 我是 moduleB 的数据
moduleA: 执行完毕
moduleB: 接收到 moduleA 的值: 我是 moduleA 的数据
moduleB: 执行完毕
index: moduleA 的值: 我是 moduleA 的数据
index: moduleB 的值: 我是 moduleB 的数据
index: 执行完毕

解释一下：

index.js 首先开始执行，它导入了 moduleA.js 和 moduleB.js。
moduleA.js 开始执行，遇到了 top-level await，暂停执行。
moduleB.js 开始执行，遇到了 top-level await，暂停执行。
moduleB.js 的 Promise 首先 resolve，打印 moduleB: Promise resolved!。
moduleA.js 的 Promise resolve 之后，moduleA.js 继续执行，它会等待 moduleBValue 的值。
moduleB.js 也会等待 moduleAValue 的值。
最后，moduleA.js 和 moduleB.js 都执行完毕，index.js 才能拿到 moduleAValue 和 moduleBValue 的值，继续执行。

这个例子清晰地展示了 top-level await 的执行顺序以及模块之间的依赖关系。

依赖关系：剪不断，理还乱？

top-level await 的依赖关系是它最复杂的地方。如果模块之间存在循环依赖，并且都使用了 top-level await，那么就很容易出现死锁。

咱们再来一个例子：

// moduleC.js
import { moduleDValue } from './moduleD.js';

console.log("moduleC: 开始执行...");
const data = await new Promise(resolve => setTimeout(() => {
  console.log("moduleC: Promise resolved!");
  resolve("我是 moduleC 的数据");
}, 1000));

export const moduleCValue = data + moduleDValue;
console.log("moduleC: 执行完毕");

// moduleD.js
import { moduleCValue } from './moduleC.js';

console.log("moduleD: 开始执行...");
const data = await new Promise(resolve => setTimeout(() => {
  console.log("moduleD: Promise resolved!");
  resolve("我是 moduleD 的数据");
}, 1000));

export const moduleDValue = data + moduleCValue;
console.log("moduleD: 执行完毕");

// index.js
import { moduleCValue } from './moduleC.js';
import { moduleDValue } from './moduleD.js';

console.log("index: 开始执行...");
console.log("index: moduleC 的值:", moduleCValue);
console.log("index: moduleD 的值:", moduleDValue);
console.log("index: 执行完毕");

在这个例子中，moduleC.js 依赖于 moduleD.js，moduleD.js 又依赖于 moduleC.js，形成了循环依赖。如果你运行这段代码，你会发现程序永远卡在那里，什么都不输出。这就是一个典型的死锁例子。

原因分析：

index.js 首先开始执行，它导入了 moduleC.js 和 moduleD.js。
moduleC.js 开始执行，遇到了 top-level await，暂停执行，等待 Promise resolve。
moduleD.js 开始执行，遇到了 top-level await，暂停执行，等待 Promise resolve。
moduleC.js 需要 moduleDValue 才能计算出 moduleCValue。
moduleD.js 需要 moduleCValue 才能计算出 moduleDValue。
两个模块都在等待对方的值，谁也无法继续执行，导致死锁。

如何避免死锁？

避免 top-level await 导致的死锁，主要有以下几种方法：

避免循环依赖： 这是最根本的解决方法。尽量减少模块之间的依赖关系，避免形成循环依赖。重新设计你的模块结构，将公共的逻辑提取到单独的模块中，减少模块之间的耦合度。

延迟依赖： 如果无法避免循环依赖，可以尝试延迟依赖。比如，将依赖放在一个函数内部，只有在需要的时候才去加载依赖模块。

// moduleC.js
let moduleDValue;

console.log("moduleC: 开始执行...");
const data = await new Promise(resolve => setTimeout(() => {
  console.log("moduleC: Promise resolved!");
  resolve("我是 moduleC 的数据");
}, 1000));

async function getModuleCValue() {
    if (!moduleDValue) {
        const moduleD = await import('./moduleD.js');
        moduleDValue = moduleD.moduleDValue;
    }
    return data + moduleDValue;
}

export { getModuleCValue };
console.log("moduleC: 执行完毕");

// moduleD.js
let moduleCValue;

console.log("moduleD: 开始执行...");
const data = await new Promise(resolve => setTimeout(() => {
  console.log("moduleD: Promise resolved!");
  resolve("我是 moduleD 的数据");
}, 1000));

async function getModuleDValue() {
    if (!moduleCValue) {
        const moduleC = await import('./moduleC.js');
        moduleCValue = (await moduleC.getModuleCValue());
    }
    return data + moduleCValue;
}

export { getModuleDValue };
console.log("moduleD: 执行完毕");

// index.js
import { getModuleCValue } from './moduleC.js';
import { getModuleDValue } from './moduleD.js';

console.log("index: 开始执行...");

const moduleC = await getModuleCValue();
const moduleD = await getModuleDValue();

console.log("index: moduleC 的值:", moduleC);
console.log("index: moduleD 的值:", moduleD);
console.log("index: 执行完毕");

在这个例子中，我们使用了 import() 函数来实现动态导入，将模块的加载延迟到需要的时候。这样可以打破循环依赖，避免死锁。注意，import() 函数返回一个 Promise，所以我们需要使用 await 来等待模块加载完成。

避免在循环依赖的模块中使用 top-level await： 如果循环依赖无法避免，那么尽量不要在循环依赖的模块中使用 top-level await。可以将异步操作放在一个单独的函数中，然后在需要的时候调用这个函数。

使用场景：哪些地方能用？

虽然 top-level await 有一些坑，但是它也有一些非常实用的场景：

动态配置加载： 在一些应用中，我们需要根据用户的配置来初始化应用。这些配置可能存储在远程服务器上，需要通过异步请求来获取。使用 top-level await 可以方便地在模块加载时获取配置，避免在应用启动后再次发起请求。

// config.js
console.log("config:开始加载配置...")
const config = await fetch('/api/config').then(res => res.json());
console.log("config:配置加载完成")

export default config;

// app.js
import config from './config.js';

console.log("app:开始启动应用...")
// 使用 config 初始化应用
console.log("app:配置信息:", config);
console.log("app:应用启动完成")

数据库连接： 在一些后端应用中，我们需要在应用启动时连接数据库。使用 top-level await 可以方便地在模块加载时建立数据库连接，避免在每个请求中都建立连接。

// db.js
console.log("db: 开始连接数据库...");
const db = await connectToDatabase();
console.log("db: 数据库连接成功");
export default db;

// api.js
import db from './db.js';

// 使用 db 执行数据库操作
console.log("api: 使用数据库连接:", db);

依赖库初始化： 一些依赖库需要在初始化时执行一些异步操作。使用 top-level await 可以方便地在模块加载时初始化依赖库，避免在使用依赖库之前手动初始化。

// analytics.js
console.log("analytics:开始初始化...")
await analytics.initialize({ apiKey: 'YOUR_API_KEY' });
console.log("analytics:初始化完成")
export default analytics;

// app.js
import analytics from './analytics.js';

// 使用 analytics 收集用户行为数据
console.log("app: 使用 analytics:", analytics);

注意事项：别踩坑！

在使用 top-level await 时，需要注意以下几点：

只在模块中使用： top-level await 只能在 ES 模块中使用，不能在 CommonJS 模块中使用。
避免循环依赖： 尽量避免模块之间的循环依赖，防止死锁。

错误处理： top-level await 抛出的错误会阻止模块的加载。因此，需要做好错误处理，避免影响整个应用的启动。可以使用 try...catch 语句来捕获错误。

// moduleA.js
try {
  const data = await fetchData();
  export { data };
} catch (error) {
  console.error("加载数据失败:", error);
  // 可以选择导出一个默认值，或者抛出一个新的错误
  export const data = null;
}

性能影响： top-level await 会阻塞模块的加载，可能会影响应用的启动速度。因此，需要谨慎使用，避免滥用。对于一些非必要的异步操作，可以考虑延迟加载或者使用 Web Workers。

总结

top-level await 是一个强大的特性，可以方便地在模块加载时执行异步操作。但是，它也有一些潜在的风险，需要谨慎使用。在使用 top-level await 时，需要充分了解它的执行顺序和依赖关系，避免出现死锁和其他问题。

总的来说，top-level await 是一把双刃剑，用好了能让你的代码更简洁、更高效，用不好就可能让你陷入调试的深渊。所以，在使用之前，一定要三思而后行，多做测试，确保你的代码能够正常运行。

好了，今天的讲座就到这里。希望大家能够通过今天的讲解，对 top-level await 有更深入的了解。如果大家还有什么问题，欢迎随时提问。下次再见！

大家好，今儿咱聊聊顶层 await 这事儿！

啥是顶层 await？