顶层 await允许在模块顶层直接使用await，简化异步初始化。它适用于动态导入、远程配置读取、资源预加载和连接初始化等场景，需注意仅ES模块支持、可能阻塞加载及循环依赖风险，现代构建工具已原生支持，建议在兼容环境中直接使用以提升代码可读性。
顶层 await（Top-level await）是现代 JavaScript 中一项实用的特性，它允许你在模块的最外层直接使用 await，而无需包裹在 async 函数中。这项功能极大简化了模块初始化逻辑，特别是在处理异步依赖时更加直观和清晰。
什么是顶层 await？
在引入顶层 await 之前，如果你需要在模块加载时等待一个异步操作（比如动态导入模块或请求配置），你必须将代码封装在一个 async 函数中，并手动调用它，或者依赖额外的运行时处理。
有了顶层 await，你可以直接在模块体中写：
const response = await fetch('/config.json');
const config = await response.json();
export const API_URL = config.apiUrl;
这个模块会暂停执行，直到 fetch 完成并导出最终结果。其他导入该模块的代码会自动等待它解析完成。
立即学习“Java免费学习笔记（深入）”；
使用场景举例
顶层 await 特别适合以下几种情况：
- 动态导入模块：根据环境或配置加载不同的实现。
- 读取远程配置：如从服务器获取 API 地址、功能开关等。
- 资源预加载：等待字体、脚本或数据就绪后再继续。
- 数据库或缓存连接初始化：确保连接建立后再对外提供服务。
例如，根据环境加载不同服务：
let service;
if (import.meta.env.PROD) {
service = await import('./prod-service.js');
} else {
service = await import('./dev-service.js');
}
export { service };
注意事项与限制
虽然顶层 await 很方便，但需注意以下几点：
- 仅在 ES 模块（.mjs 或 type="module"）中有效，CommonJS 不支持。
- 使用后模块的加载会被阻塞，影响性能，应避免长时间等待。
- 浏览器和 Node.js 都已广泛支持（Node.js ≥14.8.0），但仍需确认项目环境。
- 循环依赖下行为复杂，可能导致死锁，需谨慎设计模块结构。
如何启用与兼容处理
在支持的环境中，只需使用 ES 模块语法即可直接使用顶层 await。构建工具如 Webpack、Vite 和 Rollup 均已原生支持。
若需兼容旧环境，可考虑：
- 使用动态 import() 返回 Promise，在入口处统一处理。
- 通过构建工具转译，但语义略有不同，不能完全替代。
现代开发建议直接使用原生支持，保持代码简洁。
基本上就这些。顶层 await 让异步模块初始化变得更自然，合理使用能显著提升代码可读性和维护性。
