什么是 Async/Await？
Async/Await 是一种 ECMAScript 提案的异步编程方案，它是在 Promise 基础上的语法糖，通过使用 async 和 await 关键字可以让异步代码看起来像同步代码，同时更加易读易写。
使用 Async/Await 可以有效地解决回调地狱的问题，使异步编程变得更加简单、可读和可维护。
ES7 Async/Await 语法
Async/Await 使用 async 和 await 关键字来包装异步操作。
下面是一个简单的示例，演示了如何使用 async 和 await 来获取一个用户信息的操作：
async function getUserInfo() {
const user = await fetch('/api/user');
const userInfo = await user.json();
return userInfo;
}上面的代码中，getUserInfo 函数是一个异步函数，使用 await 关键字来等待异步请求的完成，其中 await fetch('/api/user') 会等待 fetch 请求完成后返回一个 Response 对象，然后使用 await user.json() 将 Response 对象转换为 JSON 对象（另一个异步操作）。
值得注意的是，在 async 函数内部使用 try/catch 语句可以捕获异步操作中的错误，使得程序的容错性更高。
Babel 转换
尽管 Async/Await 是 ECMAScript 提案中的内容，但是目前仅有部分浏览器支持这种语法。为了使得 Async/Await 的代码能够在更多的浏览器上运行，我们可以使用 Babel 工具进行转换。
Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 新特性转换为兼容性更强的 JavaScript 代码。下面是一个使用 Async/Await 的示例代码：
-- -------------------- ---- ------- ----- -------- ------------- - ----- ---- - ----- ------------------- ----- -------- - ----- ------------ ------ --------- - --------------------------- -- - ---------------------- -------------- -- - --------------------- ---
上面的代码中，getUserInfo 函数是一个异步函数，用于获取用户信息，并且返回一个 Promise 对象。在使用 Async/Await 的情况下，getUserInfo 函数的使用方式与普通函数基本相同。
接下来，使用 @babel/cli 进行转换：
npm install --save-dev @babel/cli @babel/core @babel/preset-env
在项目根目录下新建一个 .babelrc 文件，用于配置 Babel：
{
"preset-env": {
"targets": {
"browsers": ["last 2 Chrome versions"]
}
}
}preset-env 是一个用于自动适配目标环境所需的插件集合。以上述配置为例，Babel 会自动将 Async/Await 语法转换为 Promise 的形式，以保证在较新的 Chrome 浏览器中运行良好。
使用 @babel/cli 进行转换：
npx babel index.js --out-file index-converted.js
转换后的代码如下所示：
-- -------------------- ---- -------
---- --------
--- ----------- - -------- -- -
--- ---- - ------------------ --------------------------------------------- --------- -
--- ----- ---------
------ -------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ -------------------
---- --
---- - --------------
------------- - --
------ ------------
---- --
-------- - --------------
------ ------------------------- ----------
---- --
---- ------
------ ----------------
-
-
-- ---------
----
------ -------- ------------- -
------ ---------------- -----------
--
----
--------------------------- ---------- -
----------------------
----------------- ------- -
---------------------
---总结
ES7 Async/Await 是一种让异步编程更加简单易读的语法糖，通过使用 async 和 await 关键字可以让异步代码看起来像同步代码。
由于部分浏览器尚未支持 Async/Await 语法，因此我们可以使用 Babel 工具进行转换。在实际工程中使用转换后的代码可以提高代码兼容性，并且增加代码在不同浏览器中的可用性。
值得注意的是，Async/Await 并非是一种替代 Promise 的方案，它不是为了解决 Promise 的问题而出现。在实际使用中，我们可以在不同的场景下选择合适的方式来使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462423f968c7c53b038fb86