在 ECMAScript 2020（也称为 ECMAScript 11）中，引入了一个新的顶层 await 标识符，用于在顶层作用域中使用 await 关键字。这个新特性可以帮助开发者更方便地编写异步代码，同时也提高了代码的可读性和可维护性。
什么是顶层的 await 标识符
在以前的 ECMAScript 版本中，await 关键字只能在 async 函数中使用。这意味着如果我们想要使用 await 关键字，必须在一个 async 函数内部调用一个异步函数。
但是在 ECMAScript 2020 中，我们可以在全局作用域中使用 await 关键字，而不需要在一个 async 函数内部使用它。
下面是一个简单的例子：
let result = await fetch('https://api.example.com/data');
console.log(result);在这个例子中，我们使用 await 关键字等待一个异步操作完成，并将结果存储在 result 变量中。这个操作可以在顶层作用域中执行，而不需要在一个 async 函数中使用。
使用顶层的 await 标识符的注意事项
尽管顶层的 await 标识符可以方便地编写异步代码，但是在使用它的时候，需要注意以下几点：
1. 只能在模块中使用
顶层的 await 标识符只能在模块中使用，而不能在脚本中使用。这是因为在脚本中使用顶层的 await 标识符会导致语法错误。
2. 模块必须使用 ECMAScript 模块语法
为了使用顶层的 await 标识符，模块必须使用 ECMAScript 模块语法。这意味着需要使用 import 和 export 关键字来导入和导出模块。
下面是一个使用顶层的 await 标识符的例子：
-- -------------------- ---- ------- -- --------- ------ ------- ----- -------- --------- - --- ------ - ----- -------------------------------------- ------ ------- - -- -------- ------ ------- ---- -------------- --- ------ - ----- ---------- --------------------
在这个例子中，我们在 module.js 中定义了一个异步函数 getData，然后在 index.js 中使用 import 关键字导入这个模块，并使用顶层的 await 标识符等待异步操作完成。
3. 顶层的 await 标识符会阻塞模块的执行
使用顶层的 await 标识符会阻塞模块的执行，直到异步操作完成。这意味着如果一个模块中有多个异步操作，使用顶层的 await 标识符会导致这些操作被串行执行，而不是并行执行。
因此，如果需要并行执行多个异步操作，应该避免使用顶层的 await 标识符，而是使用 Promise.all 或其他并行执行异步操作的方法。
结论
顶层的 await 标识符是 ECMAScript 2020 中引入的一个新特性，它可以帮助开发者更方便地编写异步代码，并提高代码的可读性和可维护性。但是在使用它的时候，需要注意一些注意事项，如只能在模块中使用、模块必须使用 ECMAScript 模块语法，以及会阻塞模块的执行等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67645bf3856ee0c1d42aa56c