在现代的前端开发中，异步编程已经成为了必不可少的一部分。而在 ES7 中，async/await 语法的出现，让我们在异步编程方面又迈进了一大步。但是，由于该语法还没有被所有浏览器完全支持，我们需要使用 Babel 来将其编译成 ES5 代码以保证兼容性。
什么是 async/await 语法
async/await 是 ES7 中新增的语法，它们是 Promise 的一种语法糖。async 表示该函数是异步的，而 await 则表示在该函数中等待 Promise 对象的返回结果。这两个关键字的结合，让异步编程变得更加简单明了。
----- -------- --------- - --- ------ - ----- -------------------------------------- --- ---- - ----- -------------- ------ ----- -
在上面的代码中，我们使用 async 定义了一个异步函数，然后使用 await 等待 Promise 对象的返回结果。在这个例子中，我们使用 fetch 函数获取数据，并使用 await 等待该函数返回 Promise 对象的结果。然后我们再使用 await 等待该 Promise 对象的 json() 方法返回的数据。最后，我们将数据返回。
使用 Babel 编译 async/await 语法
由于 async/await 语法还没有被所有浏览器完全支持，我们需要使用 Babel 来将其编译成 ES5 代码以保证兼容性。下面是使用 Babel 编译 async/await 语法的步骤：
1. 安装 Babel
首先，我们需要安装 Babel。在命令行中执行以下命令：
--- ------- ---------- --------- ----------------
2. 配置 Babel
然后，我们需要在项目根目录下创建一个名为 .babelrc 的文件，并在其中配置 Babel。在 .babelrc 文件中输入以下代码：
- ---------- ------- -
这个配置告诉 Babel 使用 env 预设来编译代码。
3. 编译代码
最后，我们可以在命令行中使用 Babel 编译我们的代码。假设我们的源代码在 src/index.js 中，我们可以执行以下命令来编译代码：
----- ------------ ---------- -------------
这个命令会将 src/index.js 编译成 ES5 代码，并将结果保存在 dist/index.js 中。
示例代码
下面是一个完整的示例代码，它使用 async/await 语法获取数据并将其显示在页面上。我们将使用 Babel 来将其编译成 ES5 代码以保证兼容性。
----- -------- --------- - --- ------ - ----- -------------------------------------- --- ---- - ----- -------------- ------ ----- - ----- -------- ------------- - --- ---- - ----- ---------- --- --------- - ------------------------------------- ------------------- - --------------------- - --------------
在上面的代码中，我们定义了两个异步函数：getData 和 displayData。getData 函数使用 fetch 函数获取数据，并使用 await 等待该函数返回 Promise 对象的结果。然后我们再使用 await 等待该 Promise 对象的 json() 方法返回的数据。最后，我们将数据返回。
displayData 函数使用 await 等待 getData 函数返回的数据。然后，我们将数据显示在页面上。
总结
使用 async/await 语法可以让异步编程变得更加简单明了。但是，由于该语法还没有被所有浏览器完全支持，我们需要使用 Babel 来将其编译成 ES5 代码以保证兼容性。在实际的项目中，我们可以使用 Webpack 等工具来自动化编译代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fe9f3bd10417a2229dcb47