vue 3 中 axios 封装支持局部刷新的加载状态，关键在于将 loading 控制权交还业务组件：请求拦截器检测 config.loading 并设为 true，响应/错误拦截器设为 false；组件传入 ref 类型 loading 参数实现独立控制。
Vue 3 中 Axios 封装支持局部刷新的局部加载状态，关键在于把 loading 控制权交还给业务组件，而不是全局统一管理。拦截器只负责“通知”，不直接操作 DOM 或 UI 组件；组件自己决定是否显示、在哪显示、用什么方式显示。
让请求携带 loading 引用
在调用 axios 时，允许传入一个 ref 类型的 loading 状态，比如 loading: isLoading。这个值会被挂载到 config 对象上，供拦截器读取：
- 请求拦截器中检测
config.loading，若存在则设为 true - 响应拦截器（成功/失败）中同样检测该字段，并设为 false
- 必须确保传入的是
ref(true)这类响应式引用，不能是普通布尔值
封装 request 方法支持 loading 参数
不直接暴露 axios 实例，而是封装一个函数，自动透传 loading 配置：
- 定义类型：在 request.ts 中扩展
RequestConfig，加入loading?: Ref<boolean></boolean> - 请求拦截器里写：
if (config.loading) config.loading.value = true - 响应拦截器里写：
if (response.config.loading) response.config.loading.value = false，错误分支同理 - 这样每个 API 调用都能独立控制自己的 loading，互不影响
组件内使用示例（局部按钮加载）
在 setup 中声明 loading ref，调用 API 时传进去即可：
const btnLoading = ref(false)await api.updateUser({ id: 1 }, { loading: btnLoading })- 模板中绑定：
<el-button :loading="btnLoading">提交</el-button> - 无需手动 try/finally，也不用重复写 loading 开关逻辑
进阶：支持多个 loading 状态并行
同一个页面可能有多个操作区（如列表刷新、表单提交、导出按钮），它们的 loading 应该彼此隔离：
- 每个操作定义独立的 ref：
listLoading、formLoading、exportLoading - 分别传入对应 API 调用，拦截器按需触发，不会互相覆盖
- 避免用单一全局 loading 变量，否则点击 A 按钮时 B 区域也跟着转圈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
