在前端开发中，异步编程是一个很重要的话题。JavaScript 是一门单线程语言，因此异步编程是必不可少的。在过去，我们使用回调函数、Promise 或 async/await 来处理异步操作。而在 ES8 中，新增了 Top Level await，可以更加简化异步编码。
Top Level await 是什么？
Top Level await 是指在模块的顶层作用域中使用 await 关键字。在以前的版本中，await 只能在 async 函数中使用。而 Top Level await 的出现，使得我们可以在模块的顶层作用域中使用 await，从而简化异步编码。
Top Level await 的使用
在使用 Top Level await 之前，我们需要在项目中启用 ECMAScript 模块化，可以在 package.json 中设置 type 字段为 module。然后在模块的顶层作用域中使用 await 即可。
// index.js
import { getData } from './api.js';
const data = await getData();
console.log(data);// api.js
export async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}在上面的代码中，我们使用 Top Level await 从 api.js 中获取数据，然后在 index.js 中使用 console.log 打印出来。这样就可以避免使用回调函数或 Promise，使得代码更加简洁易读。
Top Level await 的优缺点
使用 Top Level await 可以使得异步编码更加简单明了，同时还可以避免回调地狱和 Promise 的链式调用，提高代码的可读性和可维护性。
但是，Top Level await 也有一些缺点。首先，由于它是在模块的顶层作用域中使用的，因此可能会阻塞整个应用程序的初始化过程。其次，Top Level await 只能用于 ECMAScript 模块化，不能用于 CommonJS 模块化。
总结
Top Level await 是一个很有用的功能，可以简化异步编程，提高代码的可读性和可维护性。但是，在使用它的时候需要注意一些缺点，避免出现阻塞和其他问题。我们可以根据项目的实际情况来选择是否使用 Top Level await。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65533060d2f5e1655dce3c4a