随着 JavaScript 的不断发展，ECMAScript 2020（也称为 ECMAScript 11）在 2020 年 6 月正式发布，为开发人员带来了一些新特性和改进。其中一个重要的新特性是顶层 await 表达式。
什么是顶层 await 表达式？
在以前的版本中，JavaScript 不允许在顶层代码中使用 await 关键字。这意味着在全局作用域中，您不能使用 await 关键字来等待异步操作的结果。相反，您必须将其包装在一个异步函数中。
然而，自 ECMAScript 2020 起，您可以在全局作用域中使用 await 关键字，这被称为顶层 await 表达式。这意味着您可以在全局作用域中等待异步操作的结果，而不必将其包装在异步函数中。
为什么需要顶层 await 表达式？
在过去，为了在全局作用域中使用异步操作，您必须将其包装在异步函数中。这导致代码变得复杂和冗长。顶层 await 表达式的引入解决了这个问题，使代码更加简洁和直观。
此外，顶层 await 表达式还可以提高代码的性能。在以前的版本中，您必须等待异步函数返回才能执行下一行代码。但是，使用顶层 await 表达式，您可以在等待异步操作的同时继续执行下一行代码，从而提高了代码的效率。
如何使用顶层 await 表达式？
使用顶层 await 表达式非常简单。您只需要在全局作用域中使用 await 关键字即可。例如，以下代码展示了如何使用顶层 await 表达式：
const result = await fetch('https://api.example.com/data');
console.log(result);在这个例子中，我们使用 fetch 函数获取远程数据，并使用 await 关键字等待结果。由于我们使用了顶层 await 表达式，我们可以在全局作用域中等待异步操作的结果，而不必将其包装在异步函数中。
注意事项
尽管顶层 await 表达式非常方便，但您仍然需要小心使用它。如果您在全局作用域中过度使用 await 关键字，可能会导致性能问题和代码可读性的降低。
此外，顶层 await 表达式还有一些限制。例如，您不能在模块的顶层代码中使用 await 关键字。如果您需要在模块中使用异步操作，请将其包装在异步函数中。
总结
顶层 await 表达式是 ECMAScript 2020（ECMAScript 11）中的一个重要新特性。它允许您在全局作用域中等待异步操作的结果，从而使代码更加简洁和直观。但是，您仍然需要小心使用它，并遵守其限制，以确保代码的性能和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66140a61d10417a222471ae3