在 JavaScript 中，异步编程是非常重要的。ES6 引入了 Promise 和 async/await，使得异步编程更加简单和优雅。而在 ECMAScript 2020 (ES11) 中，又引入了一个新特性：Top Level Await。这篇文章将详细介绍 Top Level Await 的概念、用法和注意事项。
什么是 Top Level Await？
Top Level Await 是指在模块的顶层作用域中使用 await 关键字。在 ES6 中，import 和 export 语句只能出现在顶层作用域中，也就是说不能在函数内部使用。而 Top Level Await 的出现，使得我们可以在模块的顶层作用域中使用 await 关键字，从而更方便地进行异步编程。
Top Level Await 的用法
使用 Top Level Await 的方法非常简单，只需要在模块的顶层作用域中使用 await 关键字即可。下面是一个简单的示例代码：
// javascriptcn.com 代码示例
// 异步函数
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
// 在模块的顶层作用域中使用 await
const data = await getData();
console.log(data);在上面的示例代码中，我们定义了一个异步函数 getData，用于获取数据。然后在模块的顶层作用域中使用 await 关键字等待 getData 函数返回数据，并将数据打印到控制台中。
需要注意的是，Top Level Await 只能在模块的顶层作用域中使用，不能在函数内部使用。如果在函数内部使用了 await，会引发语法错误。
Top Level Await 的注意事项
虽然 Top Level Await 看起来很方便，但是在使用时需要注意一些事项。
1. 模块必须是 ES6 模块
Top Level Await 只能在 ES6 模块中使用，不能在 CommonJS 模块（即 Node.js 中使用的 require 和 module.exports）中使用。因此，在使用 Top Level Await 时，必须确保模块是 ES6 模块。
2. 模块必须是顶层模块
Top Level Await 只能在顶层模块中使用，不能在子模块中使用。也就是说，如果一个模块被其他模块引用，那么这个模块就不是顶层模块，不能使用 Top Level Await。
3. 不能在循环中使用
Top Level Await 不能在循环中使用。如果在循环中使用了 await，会导致循环阻塞，无法正常执行。因此，在使用 Top Level Await 时，需要注意不要在循环中使用。
总结
Top Level Await 是 ECMAScript 2020 中的一个新特性，用于在模块的顶层作用域中使用 await 关键字。使用 Top Level Await 可以简化异步编程，使代码更加优雅。需要注意的是，Top Level Await 只能在 ES6 模块的顶层作用域中使用，不能在循环中使用。在使用 Top Level Await 时，需要注意以上几点。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653c67327d4982a6eb68b94b