vue 3 中请求拦截器应通过独立 axios 实例集中配置并全局注册，组合式 api 仅消费封装好的语义化函数；拦截器需读取 pinia store 中响应式 token，避免在 setup 中重复注册或硬编码凭证。

Vue 3 中请求拦截器不直接“结合”组合式 API 注入配置，而是通过独立的 Axios 实例 + 拦截器完成全局配置，再由组合式 API 按需调用该实例。关键在于：配置和拦截逻辑必须脱离组件生命周期，放在可复用、可提前初始化的模块中；组合式 API 只负责消费，不负责定义底层通信规则。

创建独立的 Axios 实例并集中配置

在 src/api/http/client.ts 中创建实例，统一管理 baseURL、超时、默认 headers 等：

• 使用 axios.create() 创建干净实例，避免污染全局 axios
• 把环境变量（如 import.meta.env.VUE_APP_API_BASE）注入 baseURL
• 设置 timeout: 10000、withCredentials: true 等通用项
• 导出该实例，供后续拦截器注册和组合函数使用

在拦截器中读取响应式状态（如 token）

请求拦截器需要动态获取用户凭证，不能硬编码。推荐方式是配合 Pinia：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 在 src/stores/user.ts 中定义一个 useUserStore()，其中 token 是 ref 或 computed
• 拦截器里直接调用 useUserStore().token —— 因为 Pinia store 在 setup 之外也可访问，且响应式值会自动更新
• 若未登录，跳过添加 Authorization 头；若有 token，拼成 Bearer ${token.value} 写入 config.headers

组合式 API 中只调用封装好的请求函数

不要在 setup() 里重复写 axios.get，而是封装语义化函数：

• 新建 src/api/modules/user.ts，导出 useUserInfo() 等组合函数
• 内部使用上一步导出的 Axios 实例发起请求，并用 ref 管理 loading / data / error
• 组件中直接解构使用：const { data, loading, execute } = useUserInfo()
• 这样既复用了拦截器逻辑（token、loading 计数、错误跳转），又保持了组合式 API 的响应式优势

避免常见误区

有些做法看似“结合”，实则破坏架构清晰性：

• ❌ 不要在每个 setup() 里手动调用 axios.interceptors.request.use —— 拦截器必须全局注册一次
• ❌ 不要将 token 存在 reactive({ token: '' }) 里再传给拦截器 —— 无法触发拦截器重执行
• ❌ 不要用 getCurrentInstance() 在拦截器里访问组件实例 —— 拦截器运行时组件可能不存在
• ✅ 正确路径：配置 → 实例 → 拦截器（读 Pinia）→ 组合函数（调实例）→ 组件（用函数）

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！