在前端开发中，异步操作是必不可少的，它可以提高应用程序的响应速度和性能。在JavaScript中，异步操作最常见的是使用回调函数、Promise和async/await等方式。而在ES12中，新增了一种顶层await方式，为异步操作带来了更快的执行效率。
顶层await的优势
顶层await是指可以在模块的顶层直接使用await语句，而不需要在async函数中使用。在之前的版本中，await只能在async函数中使用，且async函数必须要有一个入口点，即必须至少有一条await语句。而使用顶层await后，我们可以直接在模块导入语句的后面使用await，使代码更为简洁。
除了代码简洁外，顶层await还有以下的优势：
- 更快的执行效率：由于不需要通过async函数的入口点来执行await语句，所以顶层await可以更快地执行异步操作，提高应用程序的性能。
- 更好的错误处理：在旧的版本中，使用try/catch语句来捕获异步操作的错误时，我们需要在async函数中写入整个代码块，而使用顶层await后，我们可以在模块的顶层直接写try/catch语句，从而更好地处理异常情况。
顶层await的使用
在ES12中，使用顶层await非常简单，只需要在模块的顶层直接使用await即可。例如，我们可以通过以下方式获取一个远程API数据：
// javascriptcn.com 代码示例
import axios from 'axios';
const url = 'https://jsonplaceholder.typicode.com/users';
try {
const response = await axios.get(url);
console.log(response.data);
} catch (error) {
console.log(error);
}在上述代码中，我们使用了axios库来获取一个远程API数据。使用顶层await时，我们可以直接在导入axios的后面使用await语句，从而更加简洁、优雅。
顶层await的限制
虽然顶层await带来了很多的优势，但是它也有一些限制：
- 不能在普通函数中使用：顶层await只能在模块的顶层直接使用，不能在函数中使用。
- 不能在全局作用域中使用：由于在全局作用域中使用await会导致页面完全卡住，因此顶层await只能在模块中使用。
总结
顶层await是ES12中新增的一个特性，可以在模块的顶层直接使用await语句，从而更为简洁优雅地执行异步操作。它的优势包括更快的执行效率和更好的错误处理，但是也有一些限制。学习掌握顶层await可以帮助我们更好地编写异步操作相关的代码，提高应用程序的性能和响应速度。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654721a47d4982a6eb1803de