Babel7 带来了很多新特性，其中 top-level-await 是一个非常有用的特性，它可以让我们在顶层的 await 中等待异步的结果，从而使我们的代码更加简洁易读。在 React 应用中，我们可以将 top-level-await 应用到异步数据的获取和处理上，从而提高我们的应用的性能和用户体验。
什么是 top-level-await 特性
在 ES2017/ES8 的规范中，引入了 async/await 的语法，可以让我们更方便地处理异步的数据操作。但是在使用 await 时，我们必须将其嵌套在函数或表达式中，使得代码看起来更加复杂。而 top-level-await 特性，可以让我们在全局作用域中使用 await，这样我们就可以在异步请求导致的代码体验差异中得到更好的平衡。
在 Babel7 中，我们可以通过 @babel/plugin-syntax-top-level-await 插件来启用 top-level-await 特性，实现如下所示：
{
"plugins": ["@babel/plugin-syntax-top-level-await"]
}启用了 top-level-await 特性后，我们就可以在全局作用域中使用 await 了。
在 React 应用中使用 top-level-await 特性
在 React 应用中，我们经常需要获取和处理异步的数据，比如从 API 中获取数据或者通过 WebSockets 与服务器通信。而 top-level-await 特性可以让我们在获取异步数据时更加简洁易读，从而提高我们的代码的可读性和可维护性。
下面，让我们通过一个示例来说明在 React 应用中如何使用 top-level-await 特性。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- --------
----- --- - -- -- -
----- ------ -------- - ---------------
----- --------- - ----- -- -- -
----- -------- - ----- --------------------------------------------------------
-----------------------
--
------ -
-----
------------------- ---------
------- ---------------------------------
----- -- -
----
---------------- -- -
--- --------------
---------------------
------------------
-----
---
-----
--
------
--
--
------ ------- ----在上面的示例中，我们通过 axios 模块获取了一个异步数据，然后将其保存在 data 状态中。普通的 await 语法需要将异步请求封装在一个函数中，然后使用 await 等待异步结果的返回。但是使用 top-level-await 特性后，我们可以将 await 放到函数外层，使得代码看起来更加简洁。
需要注意的是，在使用 top-level-await 特性时，我们需要在文件的头部添加 "use strict"; 字样，以启用严格模式。否则，可能会遇到一些奇怪的问题。
总结
在本文中，我们介绍了 top-level-await 特性，以及在 React 应用中如何使用它来处理异步数据。使用 top-level-await 特性可以使代码更加简洁易读，从而提高我们的应用的性能、可读性和可维护性。但是需要注意的是，在使用 top-level-await 特性时，我们需要开启严格模式，并确保代码的编写符合语言规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b8f326add4f0e0ff180b49