顶层await允许在ES模块顶层直接使用await，无需包裹在async函数中。它使模块能暂停执行直至异步操作完成，适用于动态配置加载、条件导入和资源预初始化。需使用.mjs文件或设置"type": "module"，并在支持的环境（如Node.js 14.8+、现代浏览器）中运行。模块变为异步后会阻塞导入者，应避免滥用以防影响性能。主流浏览器和Node.js已广泛支持该特性。
JavaScript中的顶层await（Top-level await）允许你在模块的最外层作用域直接使用await关键字，而无需将其包裹在async函数中。这一特性简化了异步操作的处理，尤其是在模块初始化需要等待异步资源加载完成时非常实用。
什么是顶层await？
在ES模块（ESM）中，顶层await意味着你可以在import语句之后、函数之外的地方直接使用await。这使得模块可以暂停自身的执行，直到某个异步操作完成。
例如，当你需要从远程API获取配置或动态导入依赖时，可以直接等待结果：
// config.mjs
const response = await fetch('https://api.example.com/config');
const config = await response.json();
export default config;
其他模块导入这个模块时，会自动等待fetch完成后再继续执行。
立即学习“Java免费学习笔记（深入）”；
如何在模块中使用顶层await？
要使用顶层await，必须确保你的文件是ES模块（即使用.mjs扩展名或在package.json中设置"type": "module"），并且运行环境支持该特性（Node.js 14.8+ 或现代浏览器）。
常见使用场景包括：
- 动态配置加载：模块启动前获取远程配置。
- 条件导入依赖：根据环境决定加载哪个模块。
- 资源预加载：如数据库连接、认证令牌等初始化操作。
// app.mjs
const env = await import(`./config-${process.env.NODE_ENV}.mjs`);
export const API_URL = env.API_URL;
注意事项与限制
虽然顶层await很方便，但也有一些需要注意的地方：
- 只能在ES模块中使用，在CommonJS（
.cjs）中无效。 - 使用后会导致模块整体变为“异步模块”，其导入者也会被阻塞直到await完成。
- 过度使用可能导致模块加载变慢，影响性能。
- 不支持在非模块脚本（如传统
<script></script>标签）中使用。
浏览器和Node.js中的支持情况
主流现代浏览器（Chrome 89+、Firefox 89+、Safari 15+）都已支持顶层await。Node.js从版本14.8开始支持，但需启用ES模块模式。
在package.json中启用模块：
{
"type": "module"
}
然后通过node命令直接运行.mjs文件即可。
基本上就这些。顶层await让异步模块初始化更直观，合理使用能提升代码可读性和逻辑清晰度。不过要避免滥用，防止造成不必要的加载延迟。
