async/await 可替代嵌套 .then() 链，使异步代码线性可读、错误集中捕获；变量作用域明确便于调试；统一 try/catch 处理各类异常；工具函数应封装请求并返回业务数据；避免混用 .then() 与 await。
直接用 async/await 替代嵌套的 .then() 链，能让异步流程回归线性阅读习惯——就像写同步代码一样自然，错误也能集中捕获，不再散落在各处。
把每个 .then() 步骤转成 await 表达式
Promise 链中每一步依赖上一步结果时，本质上是串行执行。async/await 天然支持这种顺序等待，无需手动 return 新 Promise 或处理中间值传递。
- 原来写法：
api.getA().then(a => api.getB(a.id)).then(b => api.getC(b.id)) - 重构后：
const a = await api.getA(); const b = await api.getB(a.id); const c = await api.getC(b.id); - 变量名清晰、作用域明确，调试时可逐行断点，不会出现“上一个 then 返回什么我忘了”的情况
统一用 try/catch 捕获所有异常
Promise 链中的 .catch() 只能捕获链内未处理的 reject，而 async 函数里任何 await 后抛出的错误（包括网络失败、JSON 解析失败、甚至同步逻辑报错），都会被同一层 try/catch 拦住。
- 避免分散写多个
.catch()，也不用担心漏掉某一层的错误分支 - 业务逻辑和错误处理分离更干净：正常流程在 try 块内专注数据流转，错误统一归到 catch 做日志、提示或降级
- 注意：catch 中若需向上抛出，用
throw error即可，上层 async 调用者仍能用 await + try/catch 接收
封装底层请求，返回纯业务数据
让每个 async 工具函数只做一件事：发起请求、解构响应、返回真正需要的数据（比如 data 字段），而不是把整个 axios 响应对象暴露出去。
- 例如：
const getUser = async () => { const { data } = await axios.get('/user'); return data; } - 调用方拿到的就是用户对象，不是 Promise 或响应包装体，不会误写
console.log(getUser())打印出 pending 状态 - 后续组合多个请求时，语义清晰：
const user = await getUser(); const posts = await getPosts(user.id);
避免混用风格，保持上下文一致
async 函数内部不要再用 .then()，顶层调用也别再用 .then() 消费 async 函数——这是最常见的重构漏洞。
- 错误示范：
fetchData().then(res => console.log(res))—— 这里fetchData()返回 Promise，但没用 await，容易引发误解 - 正确做法：所有消费都放在 async 上下文中，用
await fetchData() - 如果必须在非 async 环境（如事件回调）中调用，就包一层立即执行函数：
(async () => { await fetchData(); })();
