在前端项目开发中，我们经常会使用到异步编程的技术。尤其是在传统的 Promise 以及 async/await 技术中，后者则是更为高效且使得代码处于易读且便于维护状态。
然而，在某些情况下，你会遇到一些代码逻辑，并不需要使用异步编程，甚至可能会因此带来一些额外的问题。如果你希望避免这些问题，我们可以使用一个叫做 babel-plugin-get-rid-of-async-await 的包进行代码转换。本文将为您提供使用该 npm 包的详细教程。
什么是 babel-plugin-get-rid-of-async-await？
babel-plugin-get-rid-of-async-await 是一个通过修改 JavaScript 代码，实现将 async/await 转换为技术相对更简单的 Promise 的 babel 插件。
这个过程是完全自动的，而且这个包也是由 TypeScript 编写的，尽管其很小却功能强大，而且其还遵循了 ESLint 中的规范。
如何安装该包？
在您的项目中，使用 npm 安装 babel-plugin-get-rid-of-async-await：
npm i -D babel-plugin-get-rid-of-async-await
如何启用该插件？
使用场景之一
如果您只想在项目的部分代码中使用该插件，那么您只需要在 .babelrc 或者 babel.config.js 文件中按如下的方式启用该插件：
{
"plugins": [
"get-rid-of-async-await"
]
}使用场景之二
如果您希望在项目的全部代码中使用该插件，那么您需要在入口文件中按如下导入的方式启用该插件：
require('babel-plugin-get-rid-of-async-await')()示例代码
假如，我们在项目中遇到了如下异步函数：
async function fetchData() {
const url = 'https://some-external-url.com/data'
const response = await fetch(url)
const data = await response.json()
return data
}通过启用 babel-plugin-get-rid-of-async-await 插件，这份代码会代码会转换为：
function fetchData() {
const url = 'https://some-external-url.com/data'
return fetch(url)
.then((response) => response.json())
}可以看到，代码变得更加简洁和易读。同时，我们也不再需要使用 async/await 技术去实现异步函数，并为此引入 Promise 相关的额外语法实现。
总结
babel-plugin-get-rid-of-async-await 是一个非常方便的 npm 包的转换工具，此包可以在您需要的时候将项目中的 async/await 代码，变形为 Promise 代码。在某些特殊情况下，替换掉异步编程相关的代码可以使得代码变得更简单、便于阅读和维护。
启用该插件也非常简单，您只需仅需在项目根目录下的 .babelrc 和 babel.config.js 文件中指定该插件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056eb181e8991b448e775d