随着前端技术的不断发展，async/await 已经成为了现代 JavaScript 开发中不可或缺的一部分。然而，由于旧版浏览器的限制，这些功能在一些浏览器上无法正常运行。幸运的是，我们可以使用 Babel 转换来解决这个问题。
在本文中，我们将讨论如何使用 Babel 转换来使 async/await 在旧版浏览器中正常运行。我们将介绍 Babel 的安装和配置，以及如何使用 async/await 的示例代码。
安装和配置 Babel
首先，我们需要安装 Babel。我们可以使用 npm 来安装 Babel。在终端中输入以下命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
这将安装 Babel 的核心模块、命令行工具和一个预设环境模块。预设环境模块将根据您的配置自动将代码转换为与目标浏览器兼容的代码。
接下来，我们需要配置 Babel。我们需要创建一个名为 .babelrc 的配置文件。在项目根目录中创建这个文件，并将以下代码添加到其中：
{
"presets": ["@babel/preset-env"]
}这个配置文件告诉 Babel 使用预设环境模块，并根据目标浏览器的版本自动转换代码。
使用 async/await 的示例代码
现在我们已经安装和配置了 Babel，我们可以编写一些示例代码来测试它是否正常工作。
以下是一个使用 async/await 的示例代码：
-- -------------------- ---- ------- ----- -------- ------------ - ----- -------- - ----- ----------- ----- ---- - ----- ---------------- ------ ----- - ------------------------------------------------------- ---------- -- ------------------ ------------ -- ----------------------
这个代码段使用 async 和 await 关键字来异步获取数据。它使用 fetch API 来获取 JSON 数据，并使用 await 关键字等待响应，然后使用 await 关键字等待解析 JSON 数据。最后，它返回 JSON 数据。
使用 Babel 转换代码
现在我们已经编写了示例代码，我们可以使用 Babel 转换它。在终端中输入以下命令：
npx babel script.js --out-file script-compiled.js
这个命令将使用 Babel 转换 script.js 文件，并将转换后的代码输出到 script-compiled.js 文件中。
现在我们可以在旧版浏览器中测试我们的代码了。我们可以在 HTML 文件中将 script-compiled.js 文件添加到 <script> 标签中，并在旧版浏览器中打开这个 HTML 文件。如果一切正常，我们应该能够在控制台中看到 JSON 数据。
结论
在本文中，我们讨论了如何使用 Babel 转换 async/await 代码以在旧版浏览器中正常运行。我们介绍了如何安装和配置 Babel，并提供了一个示例代码来测试 Babel 是否正常工作。最后，我们演示了如何使用 Babel 转换代码，并在旧版浏览器中测试了它。
使用 Babel 转换 async/await 代码是一种使现代 JavaScript 功能在旧版浏览器中正常工作的简单而有效的方法。我们希望这篇文章对您有所帮助，并能够帮助您在开发过程中更好地使用 async/await。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6763bcf9856ee0c1d42209e9