top-level-await 是 ES11 中新增的一个语法特性，它可以让我们在模块的顶层使用 await 关键字来处理异步操作，这意味着我们不再需要将异步操作包装在函数中，使得代码更加简洁和可读性更高。
使用 top-level-await 能带来的好处
在 ES6 中，我们可以使用 Promise 来处理异步操作，但是这种方法有一些缺点，比如 Promise 的 then 方法中的代码容易出现嵌套，导致代码可读性较差。而使用 top-level-await 可以带来以下好处：
- 可以在模块的顶层使用 await 关键字，避免了包装函数的复杂性，同时也使代码更加简洁易懂。
- 避免了在模块的顶层使用 IIFE (Immediately-invoked Function Expression) 的情况，使得代码在结构和可读性方面都更加清晰。
如何使用 top-level-await
在模块顶层使用 await 关键字需要满足如下的条件：
- 需要在模块的顶层使用
import或export语句。 - 模块必须被 ECMAScript 的模块系统加载，不能使用 CommonJS 的方式加载。
示例代码如下：
-- -------------------- ---- ------- -- -------- ------ ----- -------- ------------- - ------ ---------------------- -------- - -- ------ ------ - ----------- - ---- ------------- ----- ------ - ----- -------------- --------------------
以上示例代码中，我们在 app.js 顶层使用了 await 关键字来等待 doSomething 函数的执行结果，并打印出了结果。
top-level-await 的注意事项
- 因为模块必须被 ECMAScript 的模块系统加载，不能使用 CommonJS 的方式加载，所以 top-level-await 只能在浏览器环境和支持 ECMAScript 模块的 Node.js 版本中使用。
- 在使用 top-level-await 时需要注意代码的执行顺序。在模块的顶层使用 await 关键字时，需要确保被执行的代码与 import 声明语句解析的顺序一致，并且不能存在循环依赖的情况，否则会导致出现错误。
总结
ES11 中新增的 top-level-await 可以让我们更加方便地在模块顶层处理异步操作，避免了 IIFE 的复杂性，使代码更加简洁易懂。但需要注意 top-level-await 只能在 ECMAScript 模块系统中使用，还需要注意代码的执行顺序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653ce9f77d4982a6eb6dbac2