在传统的 JavaScript 中，await 关键字只能在 async 函数内部使用。但是，在 ES11 中，引入了 top-level await，这意味着我们可以在模块层级使用 await。这是一个重要的新功能，它会对前端开发有着非常大的影响。
top-level await 的作用
top-level await 的作用就是使页面初始化的过程更加流畅。在现代 Web 应用中，有很多必须在页面加载时处理的数据，比如用户信息、配置信息、环境变量等等。在过去，我们只能通过在页面加载时使用异步操作来处理这些数据。这意味着页面必须等待所有异步操作完成后才能完成渲染，导致页面加载时间变长，甚至造成页面卡顿。
但是，使用 top-level await，我们可以在模块层级使用 await，从而避免了这个问题。这样，页面不必等待所有异步操作完成，就可以进行渲染。
top-level await 的用法
在 ES11 中，使用 top-level await 很简单。我们只需要在模块的顶层使用 await 关键字即可。下面是一个简单的示例：
-- -------------------- ---- ------- -- ------ ------ ----- -------- ----------- - -- ------ ------ ---------------------- --------- - -- ------- ------ - --------- - ---- ---------- ----- ------ - ----- ------------ --------------------
在上面的示例中，我们通过 import 导入 fetchData 函数，并在它的前面加上了 await 关键字。这就允许我们在模块层级使用 await 关键字，从而获取异步操作的返回值。
需要注意的是，我们只能在模块的顶层使用 await。如果我们在函数内部使用 await，将会抛出语法错误。
top-level await 的注意事项
在使用 top-level await 时，我们需要注意以下几点：
top-level await 只能用于模块顶层代码中（即不能用于函数、块级作用域等）
top-level await 只能用于 ES modules，不能用于 CommonJS 代码中
top-level await 只能用于异步操作，不能用于同步操作
top-level await 可以使用在任何返回 Promise 的 async 函数之前
top-level await 对于前端开发的影响
top-level await 的引入将会带来非常大的影响，它将改变我们开发应用的方式。在过去，我们必须等待所有异步操作完成后才能渲染页面。但是，现在我们可以在模块层级使用 await，从而避免了这个问题。
在将来，我们可以预见到许多 Web 应用程序将从同步初始化过渡到异步初始化，这将显着改善应用程序的用户体验。此外，top-level await 还可以帮助我们减少代码量，使代码更加简洁。
结论
在 ES11 中，引入了 top-level await，使我们可以在模块层级使用 await。这是一个非常重要的新功能，它可以使我们的代码更加简洁，提高应用程序的用户体验。在使用 top-level await 时，我们需要注意一些细节，但是一旦掌握了它的用法，就能够为我们的应用程序带来很大的好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcc36c447136260172cd37