模块执行上下文支持Top Level Await，根本原因是ES模块被设计为异步执行单元，其加载与Promise生命周期深度绑定，执行阶段可暂停等待顶层await的Promise settle。
模块执行上下文支持 Top Level Await，根本原因在于 ES 模块（ESM）本身被设计为**异步执行单元**，而非传统脚本的同步执行模型。它不是给普通 JS 加了个语法糖，而是模块加载机制与 Promise 生命周期深度绑定的结果。
模块加载阶段天然支持暂停与等待
当浏览器或 Node.js 加载一个 type="module" 脚本时，引擎会启动一套完整的模块图解析流程：解析 import 语句 → 获取依赖模块 → 执行模块体。这个“执行模块体”阶段是可中断、可等待的——只要遇到顶层 await，整个模块的初始化就会暂停，直到对应 Promise settle（fulfilled 或 rejected），再继续后续代码和导出声明。
这与普通 <script> 的行为完全不同：后者在解析完就立即同步执行，没有“暂停点”，所以 await 在那里语法非法。
必须满足三个硬性前提才激活该上下文
-
显式声明为模块：HTML 中必须用
<script type="module">（内联或外链均可），Node.js 中需使用.mjs后缀、package.json中设"type": "module"，或通过node --input-type=module -
运行环境支持 ES2022+：Chrome 89+、Firefox 89+、Safari 15.4+、Node.js 14.8+ 等已默认启用；旧版本需检查是否开启实验性标志（如 Node REPL 需
--experimental-repl-await） -
无循环依赖阻塞：若模块 A
importB，B 又顶层await某个 Promise，而该 Promise 内部又间接依赖 A，则整个依赖图会静默挂起——模块上下文无法解出死锁
模块图决定了 await 的传播边界
顶层 await 不是孤立生效的，它会向上传播阻塞效果：
- 如果模块 B 有顶层
await fetch('/config')，而模块 AimportB，那么 A 的执行一定等到 B 的 Promise 完成后才开始 - 多个顶层
await在同一模块内按书写顺序串行执行，但不会自动并发；如需并行，须显式用Promise.all([a(), b()]) - 模块缓存机制依然有效：同一模块多次
import，顶层await只执行一次，后续导入直接复用已 resolve 的结果
错误处理必须在模块内部完成
顶层 await 抛出的异常不会被外部捕获，会导致整个模块状态变为 errored，所有依赖它的 import 都会 reject。因此必须在模块内用 try/catch 包裹：
❌ 错误写法：const data = await fetch('/api').then(r => r.json()); // 404 时 .json() 抛错，模块直接失败
✅ 正确写法：
try {<br>
const res = await fetch('/api');<br>
if (!res.ok) throw new Error(`HTTP ${res.status}`);<br>
const data = await res.json();<br>
export const APP_DATA = data;<br>
} catch (err) {<br>
console.error('模块初始化失败', err);<br>
export const APP_DATA = null;<br>
} 
