顶层await允许在ES模块顶层直接使用await，无需包裹在async函数中。它使模块能暂停执行直至异步操作完成，适用于动态配置加载、条件导入和资源预初始化。需使用.mjs文件或设置"type": "module"，并在支持的环境（如Node.js 14.8+、现代浏览器）中运行。模块变为异步后会阻塞导入者，应避免滥用以防影响性能。主流浏览器和Node.js已广泛支持该特性。
JavaScript中的顶层await（Top-level await）允许你在模块的最外层作用域直接使用await关键字，而无需将其包裹在async函数中。这一特性简化了异步操作的处理，尤其是在模块初始化需要等待异步资源加载完成时非常实用。
在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，必须确保你的文件是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很方便，但也有一些需要注意的地方：
.cjs）中无效。<script></script>标签）中使用。主流现代浏览器（Chrome 89+、Firefox 89+、Safari 15+）都已支持顶层await。Node.js从版本14.8开始支持，但需启用ES模块模式。
在package.json中启用模块：
{
"type": "module"
}
然后通过node命令直接运行.mjs文件即可。
基本上就这些。顶层await让异步模块初始化更直观，合理使用能提升代码可读性和逻辑清晰度。不过要避免滥用，防止造成不必要的加载延迟。
以上就是JavaScript顶层await使用_javascript模块加载的详细内容，更多请关注php中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
465
收藏
