在模块解析中使用 async 与 await,核心在于理解顶层 await 的加载机制。浏览器和 node.js 会在执行模块脚本前,先等待所有顶层 await 表达式解析完毕,确保依赖项就绪后再运行后续代码。

ESM 中顶层 await 如何阻塞模块执行
顶层 await 会暂停当前模块的执行,直到其后的异步操作完成。这允许模块在初始化阶段获取远程数据或配置,而无需在内部函数中再次包装异步逻辑。

const config = await fetch('/api/config').then(r => r.json());
console.log('Config loaded:', config); // 仅在 fetch 完成后执行
export const value = config.key;
CommonJS 环境下如何处理异步模块导入
CommonJS 不支持顶层 await,因此必须使用动态 import() 函数来获取异步模块。这种方式返回一个 Promise,需要在其回调或 await 之后才能访问导出的内容。

async function loadModule() {
const mod = await import('./module.mjs');
console.log(mod.default);
}
loadModule();
顶层 await 对模块导出顺序的影响
当模块包含顶层 await 时,其导出值可能在异步操作完成前不可用。其他模块导入该模块时,也会受到同样的阻塞影响,直到原模块的所有顶层 await 都解析完毕。
,
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











