编辑“︁JavaScript顶层Await”︁

= JavaScript顶层Await =

顶层Await（Top-level Await）是ECMAScript 2022（ES13）引入的一项现代JavaScript特性，它允许开发者在模块的顶层作用域直接使用<code>await</code>关键字，而无需将其包裹在<code>async</code>函数中。这一特性简化了异步代码的编写，特别是在模块初始化阶段。

== 介绍 ==
在传统的JavaScript中，<code>await</code>必须位于<code>async</code>函数内部。这意味着如果需要在模块加载时执行异步操作（如动态导入或API请求），开发者必须创建一个立即调用的异步函数表达式（IIFE）。顶层Await消除了这种限制，使代码更加简洁和直观。

=== 语法对比 ===
传统方式（ES2017）：
<syntaxhighlight lang="javascript">
(async function() {
    const response = await fetch('https://api.example.com/data');
    console.log(response);
})();
</syntaxhighlight>

使用顶层Await（ES2022）：
<syntaxhighlight lang="javascript">
const response = await fetch('https://api.example.com/data');
console.log(response);
</syntaxhighlight>

== 工作原理 ==
顶层Await通过以下机制工作：
* 模块系统会等待所有顶层<code>await</code>表达式完成后再执行依赖该模块的其他代码
* 如果多个模块包含顶层Await，它们会按照依赖关系顺序依次解析
* 如果顶层Await被拒绝（rejected），模块加载将失败

<mermaid>
graph TD
    A[模块加载开始] --> B{包含顶层Await?}
    B -->|是| C[暂停执行等待Promise解决]
    B -->|否| D[立即执行]
    C --> E[Promise解决后继续]
    E --> F[模块加载完成]
</mermaid>

== 使用场景 ==

=== 动态导入 ===
<syntaxhighlight lang="javascript">
const lodash = await import('https://cdn.skypack.dev/lodash');
console.log(lodash.random(1, 100));
</syntaxhighlight>

=== 配置初始化 ===
<syntaxhighlight lang="javascript">
const config = await fetch('/config.json').then(res => res.json());
export const API_URL = config.apiUrl;
</syntaxhighlight>

=== 数据库连接 ===
<syntaxhighlight lang="javascript">
const connection = await connectToDatabase();
export const db = connection;
</syntaxhighlight>

== 注意事项 ==

1. '''仅限模块环境'''：顶层Await只能在ES模块中使用，不能在CommonJS或脚本标签中使用（除非type="module"）
2. '''加载顺序影响'''：依赖顶层Await模块的代码会等待其完成
3. '''错误处理'''：需要使用try/catch处理可能的拒绝
   <syntaxhighlight lang="javascript">
   try {
       const data = await riskyOperation();
   } catch (err) {
       console.error('加载失败:', err);
   }
   </syntaxhighlight>

4. '''性能考量'''：过度使用可能导致模块加载瀑布效应

== 浏览器和Node.js支持 ==
* 现代浏览器（Chrome 89+, Firefox 89+, Safari 15+）
* Node.js 14.8+（需要启用标志）或16+（稳定支持）
* Deno和Bun原生支持

== 数学表示 ==
从执行流程角度看，顶层Await可以表示为：

<math>
M_{loaded} = \begin{cases}
M_{executed} & \text{当所有 } await\ P_i \text{ 解决} \\
\bot & \text{当任何 } await\ P_i \text{ 拒绝}
\end{cases}
</math>

其中<math>P_i</math>代表模块中的各个顶层Await表达式。

== 实际案例 ==

'''案例：天气应用模块初始化'''
<syntaxhighlight lang="javascript">
// weather.mjs
const API_KEY = 'YOUR_API_KEY';
const location = await navigator.geolocation.getCurrentPosition();
const weatherData = await fetch(
    `https://api.weather.com/v1?lat=${location.coords.latitude}&lon=${location.coords.longitude}&key=${API_KEY}`
).then(res => res.json());

export function getCurrentTemperature() {
    return weatherData.current.temp;
}
</syntaxhighlight>

'''使用模块'''
<syntaxhighlight lang="javascript">
import { getCurrentTemperature } from './weather.mjs';

console.log(`当前温度: ${getCurrentTemperature()}°C`);
</syntaxhighlight>

== 常见问题 ==

'''Q: 顶层Await会阻塞整个应用吗？'''
A: 不会，它只会阻塞依赖当前模块的其他模块的执行，不会阻塞无关代码。

'''Q: 能否在非模块脚本中使用？'''
A: 不能，必须使用<code><script type="module"></code>或.mjs文件扩展名。

'''Q: 如何处理多个顶层Await？'''
A: 它们会并行执行（除非有显式依赖），模块会等待所有Promise解决。

== 总结 ==
顶层Await是JavaScript模块系统的重要增强，它：
* 简化了异步模块初始化代码
* 消除了不必要的IIFE包装
* 使依赖异步资源的模块导出更加直观
* 需要谨慎使用以避免性能问题

随着ES模块的普及，顶层Await正成为现代JavaScript开发中的标准实践。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript现代特性]]