各位观众老爷，大家好！今天咱们来聊聊 JavaScript 里一个挺酷炫的新特性——顶层 await。这玩意儿就像给你的模块装了个涡轮增压，让异步初始化变得前所未有的简单粗暴。
开场白：模块的苦恼与救星
在没有顶层 await 之前，JavaScript 模块在处理异步初始化的时候，那叫一个费劲。你得用 IIFE (Immediately Invoked Function Expression，立即调用函数表达式) 包裹你的代码，或者搞一些复杂的 async/await 组合拳，才能确保模块在被使用之前完成所有异步操作。
这就像你要盖房子，但是地基还没打好，你就急着往上垒砖头，结果肯定是不稳当嘛。顶层 await 的出现，就是来帮你打好地基，让你的模块从一开始就稳如泰山。
什么是顶层 await？
简单来说，顶层 await 允许你在模块的最顶层（也就是不在任何函数内部）使用 await 关键字。这意味着你可以直接在模块的顶层等待一个 Promise 完成，而不需要把它包在一个 async 函数里。
这就像你直接跟包工头说：“等等，水泥还没干呢，先别动！” 包工头（也就是 JavaScript 引擎）就会老老实实地等着，直到水泥（也就是 Promise）干了（也就是 resolved），才会继续盖房子（也就是执行模块的其他代码）。
顶层 await 的好处
- 简化代码： 告别 IIFE 和复杂的异步初始化逻辑，代码更简洁易懂。
- 提高可读性： 代码结构更清晰，更容易理解模块的初始化过程。
- 更早的依赖加载： 模块可以更早地开始加载依赖，提高应用的启动速度。
- 动态依赖加载： 可以根据异步操作的结果动态地加载其他模块。
代码示例：告别 IIFE，拥抱顶层 await
咱们先来看看在没有顶层 await 的时候，异步初始化模块是怎么做的：
// 老式写法：使用 IIFE
let data;
(async () => {
const response = await fetch('/api/data');
data = await response.json();
console.log('数据加载完成');
})();
export { data };
//使用时，需要注意data可能未加载完成
setTimeout(() => {
console.log(data)
}, 1000)这段代码看起来是不是有点眼花缭乱？你需要用一个 IIFE 包裹你的异步代码，然后才能把结果赋值给模块的变量。而且，在使用 data 之前，你还得小心翼翼地检查它是否已经加载完成。
现在，让我们来看看使用顶层 await 的写法：
// 使用顶层 await
const response = await fetch('/api/data');
const data = await response.json();
console.log('数据加载完成');
export { data };
console.log("模块加载完成！ data已经准备好")
console.log(data)是不是感觉清爽多了？你只需要直接在模块的顶层使用 await 关键字，就可以等待 fetch 请求完成，然后把结果赋值给 data 变量。JavaScript 引擎会自动等待 data 加载完成，才会执行模块的其他代码。
案例分析：各种场景下的顶层 await
咱们再来看几个更具体的例子，看看顶层 await 在不同的场景下都能发挥什么作用。
- 加载配置文件：
// config.js
const response = await fetch('/config.json');
const config = await response.json();
export default config;
// app.js
import config from './config.js';
console.log(config.apiUrl); // 可以直接访问配置项，无需等待在这个例子中，config.js 模块使用顶层 await 加载配置文件。app.js 模块可以直接导入 config，并访问其中的配置项，而不需要担心配置尚未加载完成的问题。
- 初始化数据库连接：
// db.js
import { createConnection } from 'mysql';
const connection = createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'mydb'
});
await new Promise((resolve, reject) => {
connection.connect(err => {
if (err) {
reject(err);
} else {
console.log('数据库连接成功');
resolve();
}
});
});
export default connection;
// app.js
import connection from './db.js';
connection.query('SELECT * FROM users', (err, results) => {
console.log(results); // 可以直接执行数据库查询，无需等待连接建立
});在这个例子中，db.js 模块使用顶层 await 初始化数据库连接。app.js 模块可以直接导入 connection，并执行数据库查询，而不需要担心连接尚未建立的问题。
- 动态加载依赖：
// analytics.js
const apiKey = await fetch('/api/get-analytics-key').then(res => res.text());
const analyticsLibrary = await import(`https://cdn.example.com/analytics-${apiKey}.js`);
export default analyticsLibrary;
// app.js
import analyticsLibrary from './analytics.js';
analyticsLibrary.trackEvent('page_view'); // 可以直接使用分析库，无需等待加载在这个例子中，analytics.js 模块使用顶层 await 动态加载分析库。根据从服务器获取的 API 密钥，加载不同版本的分析库。app.js 模块可以直接导入 analyticsLibrary，并使用其中的函数，而不需要担心库尚未加载完成的问题。
注意事项：顶层 await 的使用限制
虽然顶层 await 很方便，但是它也有一些使用限制。
- 只在模块中使用： 顶层
await只能在 ES 模块中使用，不能在 CommonJS 模块中使用。 - 浏览器支持： 顶层
await需要浏览器支持 ES 模块和顶层await特性。现代浏览器都已经支持，但是老旧浏览器可能不支持。 - 性能影响： 过度使用顶层
await可能会影响应用的启动速度。因为 JavaScript 引擎需要等待所有顶层await完成后才能执行模块的其他代码。 - 依赖循环： 避免出现依赖循环，否则可能会导致死锁。
顶层 await 与其他异步模式的对比
为了更好地理解顶层 await 的优势，咱们把它和其他异步模式做个对比。
| 特性 | IIFE | async 函数 + await |
顶层 await |
|---|---|---|---|
| 代码简洁性 | 较差，需要额外的函数包裹 | 较好，但需要定义 async 函数 |
最好，直接使用 await |
| 可读性 | 较差，代码结构复杂 | 较好，代码结构清晰 | 最好，代码结构最清晰 |
| 适用范围 | 广泛，可以在任何地方使用 | 广泛，但需要定义 async 函数 |
有限，只能在 ES 模块中使用 |
| 性能 | 可能影响启动速度，因为需要等待 IIFE 执行完成 | 可能影响启动速度，因为需要等待 async 函数执行完成 |
可能影响启动速度，因为需要等待所有顶层 await 完成 |
| 是否阻塞模块执行 | 阻塞，需要等待 IIFE 执行完成 | 阻塞，需要等待 async 函数执行完成 |
阻塞，需要等待所有顶层 await 完成 |
| 动态依赖加载 | 不支持 | 不支持 | 支持，可以根据异步操作的结果动态加载其他模块 |
总结：顶层 await 的未来
总的来说，顶层 await 是一个非常有用的特性，它可以简化异步模块初始化，提高代码的可读性和可维护性。虽然它有一些使用限制，但是只要合理使用，就可以大大提高开发效率。
随着 JavaScript 引擎的不断发展，顶层 await 的性能也会越来越好，它的应用范围也会越来越广。相信在不久的将来，顶层 await 将会成为 JavaScript 模块开发的标配。
补充说明：模块类型和顶层 await 的关系
刚才提到顶层 await 只能在 ES 模块中使用，那什么是 ES 模块呢？它和 CommonJS 模块有什么区别呢？
- ES 模块 (ECMAScript Modules)： 使用
import和export关键字导入和导出模块。浏览器和 Node.js 都支持 ES 模块。 - CommonJS 模块： 使用
require和module.exports导入和导出模块。主要用于 Node.js 环境。
要使用顶层 await，你需要确保你的代码是 ES 模块。在 Node.js 中，你可以通过以下几种方式来启用 ES 模块：
- 使用
.mjs文件扩展名： 将你的 JavaScript 文件保存为.mjs扩展名。 - 在
package.json中设置"type": "module"： 在你的项目的package.json文件中添加"type": "module"属性。 - 使用
--experimental-modules标志： 在运行 Node.js 时，使用--experimental-modules标志。
代码示例：Node.js 中使用顶层 await
咱们来看一个在 Node.js 中使用顶层 await 的例子。
- 创建
package.json文件：
{
"name": "top-level-await-example",
"version": "1.0.0",
"type": "module"
}- 创建
index.mjs文件：
// index.mjs
import fetch from 'node-fetch'; // 需要安装 node-fetch
const response = await fetch('https://api.github.com/users/octocat');
const user = await response.json();
console.log(user.login); // octocat- 运行代码：
node index.mjs在这个例子中，我们使用 node-fetch 库来发送 HTTP 请求，并在模块的顶层使用 await 关键字等待请求完成。由于我们在 package.json 文件中设置了 "type": "module"，所以 Node.js 会将 index.mjs 文件视为 ES 模块，并允许我们使用顶层 await。
总结的总结：顶层 await，未来可期！
好了，关于顶层 await 的内容就讲到这里。希望通过今天的讲解，大家能够对顶层 await 有更深入的了解，并在实际开发中灵活运用它。
记住，顶层 await 虽然好用，但是也要注意使用限制，避免过度使用。只有合理使用，才能发挥它的最大价值。
感谢大家的收看，咱们下期再见！