随着 JavaScript 语言版本的不断升级，新的特性和语法不断涌现。其中，ES2018 引入的 Top Level await 是一个许多人可能不熟悉的特性，但是它却有着许多妙用。在本文中，我们将探讨 Top Level await 的含义、用法以及它带给我们的便利。
Top Level await 是什么？
Top Level await 是 ECMAScript 2018 中引入的一项新特性。通俗的来讲，就是允许在模块顶层运行 await 命令。在此之前，JavaScript 中只能在异步函数或 async IIFE 中使用 await 命令来等待一个 promise 对象的返回。但是有了 Top Level await，我们现在可以直接在模块顶层中使用 await 命令了。
Top Level await 如何使用？
要在模块顶层中使用 await 命令，需要将模块类型指定为 module 类型。目前，可以在 Node.js 中使用 --experimental-modules 标志来启用模块中的 Top Level await。在支持 ES2018+ 的浏览器环境中，也可以直接在 script 标签上添加 type="module" 属性。
以下是一个简单的 Node.js 示例：
// index.js
import { fetchData } from './api.js';
const data = await fetchData();
console.log(data);// api.js
export async function fetchData() {
const response = await fetch('https://api.example.com/data');
return response.json();
}在这个示例中，我们引入了 api.js 模块，然后在 index.js 的顶层代码中使用 await 命令来等待 fetchData 函数的返回。如果不使用 Top Level await，我们需要将 await 命令放在一个异步函数中，或者使用 Promise 的 then 方法来处理返回值。
Top Level await 的妙用
Top Level await 提供了许多便利，使我们能够更加方便和简洁地处理异步代码。以下是 Top Level await 的几个妙用：
1. 更加清晰简单的模块代码
在过去，如果我们需要在模块中等待一个异步操作完成后才能执行后续的逻辑，通常需要写一个异步函数或者使用 Promise 的 then 方法。这样会使得模块代码变得混乱，难以理解。使用 Top Level await 可以去掉这些冗余的代码，使模块代码更加简单和清晰。
2. 更加直观的测试代码
使用 Top Level await 可以直接等待异步操作完成后再执行测试代码。这样可以避免使用回调函数或者 Promise 链式调用来处理异步测试代码，从而使测试代码更加直观和易于维护。
以下是一个使用 Top Level await 的测试示例：
// api.test.js
import { fetchData } from './api.js';
test('fetchData should return expected data', async () => {
const data = await fetchData();
expect(data).toEqual({ name: 'test', age: 18 });
});3. 更加优雅的任务处理
使用 Top Level await 可以使我们更加优雅地处理任务。例如，我们需要依次执行多个异步操作，并在所有操作完成后打印日志。使用传统的 Promise 链式调用方法可以实现这个功能，但是代码看起来很复杂。使用 async/await 和 Top Level await 可以让代码变得简单明了。
以下是一个使用 Top Level await 的任务处理示例：
// javascriptcn.com 代码示例
async function fetchData() {
const response = await fetch('https://api.example.com/data');
return response.json();
}
async function processTasks() {
const data1 = await fetchData();
const data2 = await fetchData();
const result = data1.concat(data2);
console.log(result);
}
await processTasks();在这个示例中，我们定义了一个 fetchData 函数来获取数据，然后在 processTasks 函数中依次执行两个 fetchData 操作，并将它们组合在一起。最后使用 Top Level await 等待 processTasks 函数完成后输出结果。
总结
Top Level await 是一个非常有用的特性，它可以使我们更加方便和简洁地处理异步代码。在使用 Top Level await 时需要注意模块类型必须指定为 module 类型，并且需要在支持 ES2018+ 的环境中使用。我们可以使用 Top Level await 来简化模块代码、优化测试代码以及更加优雅地处理任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653a784b7d4982a6eb481c87