Pinia异步action优化需统一用async/await封装、配套loading/error/data状态字段、API调用抽离至独立模块、高频场景添加AbortController取消机制。

Pinia 的异步 action 调用链路优化，核心在于让请求更可控、状态更清晰、复用更方便，而不是堆逻辑或硬编码。

统一用 async/await 封装，避免混写 Promise 链

所有网络请求类 action 必须声明为 async 函数，全程使用 await 等待，不穿插 .then/.catch。这样能保证错误可被 try/catch 捕获，也便于在组件中统一处理 reject。

• ✅ 正确：async fetchPost(id) { const res = await api.getPost(id); this.post = res.data; }
• ❌ 避免：fetchPost(id) { return api.getPost(id).then(...).catch(...) }

状态字段要配套，别只管“成功”不管“过程”

loading、error、data 这三个字段不是可选装饰，而是链路完整性的一部分。它们共同构成一次请求的完整生命周期视图。

• loading 控制按钮禁用、骨架屏显隐
• error 存用户友好的提示（如 err.response?.data?.message），不是原始 error 对象
• data 字段名建议具体化（如 userProfile、orderList），避免笼统叫 data

API 调用必须抽离到独立模块

action 内只做状态流转和业务编排，不出现 axios 或 fetch 实例调用。接口地址、拦截器、超时、鉴权都收口在 src/api/ 下。

• 比如 src/api/user.ts 导出 getUser(id)、updateProfile(payload)
• action 中只 import { getUser } from '@/api/user'，然后 await getUser(id)
• 好处是：换请求库不改 store，Mock 测试只需替换 api 模块，类型推导自动生效

高频场景加 AbortController 主动取消

搜索框输入、下拉刷新、快速切换 tab 时，上一个请求还没返回就发了新请求——这类情况必须取消旧请求，否则容易覆盖或渲染错乱。

• 在 action 内声明 controller = new AbortController()
• fetch 或 axios 请求时传入 { signal: controller.signal }
• 新请求发起前调用 controller.abort()（注意判空）
• 尤其适合带 debounce 的搜索 action 或分页加载场景