ES2020 新增了 top-level await 功能，使得在模块的顶层作用域中可以使用 await 关键字，而不必将其包裹在异步函数中。但是，这个新功能在实践中遇到了一些问题，本文将详细介绍这些问题，并提供一种完美解决方案。
问题描述
在使用 top-level await 功能时，我们可能会遇到如下错误：
SyntaxError: await is only valid in async function
这个错误提示表明，在模块的顶层作用域中使用 await 关键字是不被允许的，必须将其包裹在异步函数中。
这个问题的原因是，JavaScript 引擎在解析模块时，会将其作为一个整体进行解析，而在这个过程中，await 关键字会被认为是在顶层作用域中使用，从而导致上述错误的出现。
解决方案
为了解决这个问题，我们需要将模块的顶层作用域转换为异步函数的作用域。这可以通过使用一个特殊的自执行异步函数来实现，具体代码如下：
(async () => {
// 在这里使用 top-level await
const response = await fetch('https://api.github.com/users');
const data = await response.json();
console.log(data);
})();上述代码中，我们使用了一个自执行异步函数来包裹模块的顶层作用域，从而将其转换为异步函数的作用域。在这个自执行异步函数中，我们可以安全地使用 top-level await 功能，而不必担心出现上述错误。
示例代码
为了更好地理解上述解决方案，下面我们提供一个完整的示例代码，该代码使用 top-level await 功能请求 GitHub 的用户数据，并将其打印到控制台上。
// index.js
(async () => {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
console.log(data);
})();上述代码中，我们使用 top-level await 功能请求 GitHub 的用户数据，并将其打印到控制台上。这个代码可以直接在浏览器的控制台中运行，也可以使用工具如 webpack 进行打包后在浏览器中运行。
结论
ES2020 新增的 top-level await 功能为我们带来了更为便利的异步编程体验，但是在实践中需要注意避免出现 SyntaxError 的错误。通过使用自执行异步函数，我们可以完美解决这个问题，从而安全地使用 top-level await 功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673cdd05face55d72055e92e