顶层 await 仅在 type="module" 脚本中有效，因模块是异步执行单元，而普通 script 是同步环境，不支持暂停等待；需 script type="module" 且运行环境支持 ES2022+（如 Chrome 89+、Node.js 14.8+）。
顶层 await 只能在 type="module" 脚本中用，普通 <script></script> 会直接报错 SyntaxError。 它不是“让任意脚本支持 await”，而是模块加载机制的一部分 —— 模块本身就是一个异步执行单元，顶层 await 是它的自然延伸。
为什么 <script></script> 里写 await 会报错？
因为非模块脚本默认是同步执行、非严格模式、无作用域隔离的运行环境。顶层 await 要求整个模块加载过程可暂停、可等待 Promise 解析完成，这和传统脚本的执行模型冲突。
常见错误现象：
-
Uncaught SyntaxError: await is only valid in async function（即使加了async函数包裹也不行，因为这不是函数内） -
Uncaught SyntaxError: Unexpected token 'await'（浏览器不识别顶层语法）
必须满足两个前提才生效：
- 脚本必须声明为模块：
<script type="module" src="app.js"></script>或内联<script type="module">...</script> - 运行环境需支持 ES2022+（Chrome 89+、Firefox 89+、Safari 15.4+，Node.js 14.8+）
type="module" 脚本里怎么写顶层 await？
直接在模块顶层（不在函数里）写 await 表达式即可。它会让整个模块的初始化阻塞，直到 Promise settle，后续 import 和模块体代码才会继续执行。
示例：
```js
// utils.js
export const fetchData = () => fetch('/api/config').then(r => r.json());
<p>// main.js
import { fetchData } from './utils.js';</p><p>// ✅ 合法：顶层 await
const config = await fetchData();</p><p>// ✅ 后续代码等 config 解析完才执行
console.log('config loaded:', config);</p><p>// ✅ export 也支持（但不能 export default 一个 await 表达式）
export const APP_CONFIG = config;</p><pre class="brush:language-;toolbar:false;">
注意点：
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
- 不能
await非 Promise 值（虽然不会报错，但无实际等待效果） - 多个顶层
await是串行执行的，前一个没结束，后一个不会开始 -
await后面可以是任何 thenable，不限于Promise实例
顶层 await 对依赖链的影响
如果 A 模块 import B 模块，而 B 模块用了顶层 await，那么 A 的执行一定会等到 B 的 await 完成后才开始 —— 这是模块图的强制顺序约束，不是靠代码位置决定的。
比如：
```js
// b.js
console.log('b start');
await new Promise(r => setTimeout(r, 100));
console.log('b end');
export const value = 42;
// a.js
import { value } from './b.js';
console.log('a runs, value =', value); // 一定输出 42，且在 'b end' 之后
```
关键影响：
- 模块加载变成异步过程，
document.currentScript在顶层 await 期间可能为null - 动态
import()不受此限制，它始终返回 Promise，可在任意脚本中使用 - 服务端渲染（SSR）时需确保运行时支持顶层 await，否则 Node.js 会抛错
容易被忽略的兼容性与调试陷阱
顶层 await 看似简单，但真实项目里最容易栽在三个地方：
- 开发服务器未正确设置 MIME 类型：模块脚本必须响应
Content-Type: text/javascript，否则 Chrome 会静默失败 - 跨域模块缺失 CORS 头：
<script type="module" src="https://cdn.example.com/app.js"></script>若服务端没返回Access-Control-Allow-Origin，控制台只报 CORS 错误，不会提示 await 相关问题 - 构建工具（如 Webpack/Vite）默认不处理顶层 await 的依赖分析，若用
require()或非标准 import 方式混用，可能导致模块执行顺序错乱
最稳妥的验证方式：打开 DevTools → Network → 找到该模块请求 → 查看 Response Headers 是否含 content-type: text/javascript，再看 Console 是否有 Uncaught SyntaxError 或 CORS 报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
