从 ES2017 (ES8) 开始，JavaScript 引入了 async/await，这是一种处理异步任务的简便方法。但是，直到 ES11，我们才能在模块的顶层使用 await 语句。这意味着我们可以在加载模块时等待异步操作完成，而无需另外的代码或包装器函数。
什么是 top-level await?
top-level await 意味着现在我们可以在 JavaScript 模块的顶层级别使用 await，这与使用 async 函数在模块的内部使用 await 不同。
换句话说，当我们导入模块时，await 关键字允许我们暂停模块的解析和执行，直到一个异步操作完成并返回数据。top-level await 允许我们捕获异步操作的结果，而不必在其后引入另一个级别的异步函数调用。
注意：top-level await 使用时需要在模块文件开头添加 'use strict'，并且要注意使用顶层级别的异步等待可能会影响您的应用程序性能。
如何正确使用 top-level await?
top-level await 已经可以在 Chrome、Node.js、V8 版本 9.0 中使用。
在使用 top-level await 时，需要遵守以下规则：
- 导出等待的异步操作，以确保在线程安全的情况下保留同步性能。
-- ------- --------- ----- ------------ ------ - ------- - ---- ----------- ----- ------ - ----- ---------- ------ ------- -------
- 确保在模块的顶层级别使用 await 方法之前，所有导入和引用都已经完成。
-- ---------------------------
--- -------
------------- -- -
------ - ------- --------
---
------ ------- -------- 避免在循环或内部函数中使用 top-level await。
-- -------------------- --------- -----
--- ------ ---- -- ------ -
----- ---- - ----- --------------
-- ---
-
-- ---- ----- --------
----- -------- ----------- -
--- ------ ---- -- ------ -
----- ---- - ----- --------------
-- ---
-
-
------------
- 可以将 await 方法移入包装器函数，以使代码更简洁
-- ----------------------- --------- -----
----- -------- ---------- -
----- ------ - ----- ----------------------
----------------------------
-
-----------结论
top-level await 可以使 JavaScript 中的异步操作更简单、更快，但是如果不遵循其规则，它可能会导致一些问题。在读取、解析和执行代码时，请确保始终遵循最佳实践，以获得最佳性能和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6729b98d2e7021665e256fc3