JavaScript Top-Level Await

Top-Level Await（顶级await）：ES2022模块中直接使用await、模块执行顺序影响、与then()对比、动态导入import()配合、Node.js ESM支持条件 · 难度：入门 · +10XP

JavaScript Top-Level Await —— 模块顶层的await

以前await只能在async函数内使用。ES2022允许在ES模块的顶层直接使用await——称为Top-Level Await。这让模块初始化更简洁。

对比

// 旧方式：需要用async函数包裹
(async () => {
  const data = await fetch('/api/config');
  export const config = await data.json();
})();
// 新方式：直接写
const data = await fetch('/api/config');
export const config = await data.json();

注意：TLA会阻塞依赖它的模块加载，使用时需谨慎。

动手练习

1. 基础练习：在ES模块顶层await一个fetch请求，直接在模块作用域使用返回的数据。
2. 进阶应用：测试TLA的阻塞行为——两个模块互相依赖时观察加载顺序。
3. 项目实战：在项目初始化时用TLA异步加载配置文件。