Trae AI 教程：同步代码一键改写为异步 async/await
将基于 Promise.then() 或回调风格的异步代码迁移到 async/await 语法，关键在于定位阻塞点、抽取 Promise 操作以及重整控制流。结合具体工具链，下面五种方案能助你高效完成转型。
一、手动重构：识别 Promise 返回结果，以 await 取代 then
若代码中已使用了 fetch、axios 等返回 Promise 实例的库，手动重构最为直观——逐层将 .then() 调用替换为 await，原先的嵌套结构即刻化为线性流程。
- 确认函数返回的是 Promise 实例，例如将
fetch(url).then(...)改写为const res = await fetch(url)。 - 为外层函数添加
async修饰符，比如function getData()变为async function getData()。 - 在每个 Promise 调用前插入
await，如用const data = await promiseFn()替换promiseFn().then(data => {...})。 - 使用
try/catch包裹await表达式以捕获异常，取代原有的.catch()链。
二、借助 Babel 插件 @babel/plugin-transform-async-to-generator 实现编译期自动转换
当需要兼容老旧运行环境时，该 Babel 插件能在编译阶段自动将 async/await 降级为 generator 与 Promise 的组合实现，业务代码无需任何改动。
- 安装插件：
npm install --save-dev @babel/plugin-transform-async-to-generator - 在
babel.config.js的 plugins 数组中配置 '@babel/plugin-transform-async-to-generator' - 确认已启用
@babel/preset-env，并且 targets 配置足以涵盖目标运行环境 - 执行 Babel 编译后，源码中所有的 async 函数均被转换为依赖 regeneratorRuntime 的可兼容代码。
三、利用 ESLint 插件 eslint-plugin-promise 及辅助规则获得实时提示
此方法不直接修改代码，而是借助静态分析识别出适合升级为 async/await 的 Promise 链，并在 IDE 中显示快速修复选项——非常适合在编码过程中同步重构。
- 安装插件：
npm install --save-dev eslint-plugin-promise - 在
.eslintrc.js的 plugins 中添加 'promise'，并在 rules 中开启 'promise/prefer-await-to-then' - 文件保存后，VS Code 或 WebStorm 会在
.then()调用处显示灯泡图标，点击即可一键转换为 await 语法。 - 对于多个
.catch()或复杂链式调用，插件同样会建议拆分或封装为独立的 async 函数。
四、借助 Codemod 工具 jscodeshift 批量转换 Promise 链
在大型代码库中，若有大量 .then().catch() 需要统一升级，jscodeshift 是可靠之选——它基于 AST 精确匹配并安全替换，避免了正则表达式带来的误匹配风险。
- 通过 npm 全局安装 jscodeshift：
npm install --global jscodeshift - 获取社区编写的 transform 脚本，比如
transform-then-to-async-await.js - 先运行预览命令检查效果：jscodeshift -t transform-then-to-async-await.js src/ --dry --print
- 确认结果符合预期后，去掉
--dry参数执行实际重写，所有符合条件的.then()链均被替换为await + try/catch模式。
五、使用 VS Code 扩展 JavaScript Booster 进行交互式重构
日常开发中更便捷的方式是安装一个扩展，将光标置于 Promise 链上，触发快捷键即可智能转换，变量名与注释原封不动保留，并支持差异预览。
- 在 VS Code 扩展商店搜索并安装 JavaScript Booster
- 打开包含
.then()的 JS 文件，将光标移至任意.then()调用起始处 - 按下
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入 Booster: Convert then to async/await - 选择作用范围（当前行、当前函数或整个文件），扩展会展示对比面板，确认后一键执行转换。