ES12 中 Async Await 的新特性：Top-Level Await
在 JavaScript 中，异步编程已经成为前端开发中的一个重要技能。ES6 引入了 async/await 的语法糖，让异步编程更加简单明了，但是在 ES6 中，await 只能在 async 函数内部使用。而在 ES12 中，我们迎来了 Top-Level Await 这个新特性，允许我们在模块的顶层使用 await。
什么是 Top-Level Await？
Top-Level Await 就是指在模块的顶层直接使用 await 关键字，而不需要在 async 函数内部使用。这个新特性在 Node.js 14 中已经得到了支持，但是需要在模块中添加 "type": "module" 的配置。
示例代码如下：
// javascriptcn.com 代码示例
// 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://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
return data;
}在上面的代码中，我们在模块的顶层使用了 await 关键字，直接获取了 api.js 模块中的异步函数 getData() 返回的数据，并在控制台中打印出来。
Top-Level Await 的优势
使用 Top-Level Await 可以让我们更加方便地处理异步操作，避免了写一堆嵌套的回调函数或者使用 Promise 的 then() 方法。同时，Top-Level Await 也可以让我们更加清晰地表达代码的意图，使得代码更加易读易懂。
不过需要注意的是，在模块的顶层使用 await 也有一些限制。首先，模块必须使用 "type": "module" 的配置，否则无法使用 Top-Level Await。其次，模块的执行顺序可能会受到影响，需要特别注意代码的顺序。
总结
Top-Level Await 是 ES12 中的一个新特性，可以让我们在模块的顶层直接使用 await 关键字，更加方便地处理异步操作。但是需要注意的是，使用 Top-Level Await 也有一些限制，需要特别注意代码的顺序，以及模块的配置。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655bf4ffd2f5e1655d6069f2