前言
在现代的 Web 开发中，异步编程变得越来越普遍。在 JavaScript 中，异步编程的基础是回调、Promise 和 Generator。然而，现在，ES2017 引入了 async 和 await，这是一种更简洁明了的异步编程方式。我们可以使用 async 和 await 来避免回调地狱，并将代码写成顺序执行。
然而，浏览器并不支持 async 和 await，所以我们需要通过 Babel 来将其转换为浏览器可以理解的 JavaScript 代码。
本文主要介绍如何配置 Babel 以支持 async 和 await。
环境
在开始之前，请确保你已经正确安装了 Node.js 环境和 npm。如果还没有，请先去官网下载并安装。
安装 Babel
首先，我们需要在项目中安装 Babel：
npm install --save-dev @babel/core @babel/preset-env npm install --save @babel/polyfill
@babel/core是 Babel 的核心模块。@babel/preset-env是 Babel 的预设模块，它可以根据你的项目环境，自动地进行一系列插件的打包。@babel/polyfill是 Babel 的 Polyfill 模块，它可以在浏览器中实现一些不支持的新特性语法，比如：Promise、Object.assign、Array.includes 等等。
配置 Babel
在项目的根目录下创建一个 .babelrc 文件，这个文件是 Babel 编译器的配置文件。我们可以在该文件中定义编译规则。这里是一个最简单的 .babelrc 配置文件，该文件告诉 Babel 我们正在使用 @babel/preset-env 预设插件：
{
"presets": [
"@babel/preset-env"
]
}使用 Babel
在你的 JavaScript 代码中使用 async 和 await，然后通过 Babel 编译器将其转换为浏览器可以理解的代码：
async function test() {
return Promise.resolve("Hello World");
}
test().then(res => {
console.log(res);
});最后，在你的 HTML 文件中引入 @babel/polyfill：
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
----- --------------- --
------- ---------------------------------------------------------------
-------
------
------- --------------------------
-------
-------总结
至此，我们已经完成了 Babel 的配置，并使用 async 和 await 实现了一个简单的例子。虽然 async 和 await 很方便，但要注意其语法和使用限制。我们需要在项目中正确地配置 Babel，并在浏览器中引入 @babel/polyfill，以确保我们的代码可以兼容所有的浏览器。
希望这篇文章能够对大家有所帮助，让大家在日常开发中更加便利地使用 async 和 await。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b355fa48841e9894f99da7