ES2020 标准中引入了 top-level await 的功能，可以让开发者在 ES 模块中更加灵活地使用异步编程，代码可读性更高，降低了代码复杂度。本文将详细介绍 top-level await 的定义、用法及其注意事项。
top-level await 是什么？
它是指在 ES 模块的顶级作用域中，使用 await 关键字等待 Promise 对象的结果。在 ES2017 之前，使用 await 必须在 async 函数中使用。而 top-level await 可以直接在模块中使用，如下所示：
-- -- ---- ------ - - - ---- --------- ----- ----- - ----- ---- ------ - ----- --
top-level await 的用途
1. 简化异步操作
使用 top-level await 可以简化异步操作的代码。例如，我们可以在模块中使用 async 和 await，而不必在调用模块的代码中处理 Promise：
-- -- ------ ----- -------- ----------- ----- ---- - ----- -------------------------------- ------ ----- ------------ - -- --------- ------ - -------- - ---- ----------- ----- --- - ----- -----------
2. 使用 Promise.all 简化代码
使用 Promise.all 、Promise.any 和 Promise.allSettled 可以在模块中将 Promise 对象合并成一个 Promise 对象数组来并行进行异步操作：
-- --
------ ----- -------- ------------
----- -------- ----- -------- - ----- -------------
-----------------------------------
---------------------------------
-----------------------------------
---
----- ---- - -
------- ----- --------------
----- ----- ------------
-------- ----- --------------
--
------ -----
-
-- ---------
------ - --------- - ---- ------------
----- ---- - ----- ------------注意事项
1. 顶级 await 只能出现在模块顶层作用域中
不能出现在函数、循环、条件语句或其他嵌套作用域中。
-- ---- ----- ----- - ----- ------------ -- ---- -- ------------ ----- ----- - ----- ------------ -
2. 顶级 await 只能在模块中使用
不能用于普通的 JavaScript 文件、HTML、或者其它环境。
3. 顶级 await 可以等待任何 Promise 对象
包括普通的 Promise 对象和带有 async/await 的函数的返回值。
例如：
----- ----- - -- -- --- --------------- -- ------------------- ----- ----- ------------ ----- -------- -------- ----- ------------ ------ -------- - ----- -------- - ----- --------
总结
在 ES2020 标准中，top-level await 的引入让我们在 ES 模块中更加简洁地使用异步编程。通过示例代码的介绍，我们可以了解到 top-level await 的定义、用法及注意事项，方便我们在实际开发中使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66493dd7d3423812e48071e5