最稳妥的Vue网络请求方案是封装带拦截器的Axios实例，包含创建实例（baseURL、timeout等配置）、请求拦截（自动带Token、支持跳过鉴权）和响应拦截（统一解构、分类错误处理），并可选导出常用方法。
直接封装一个带拦截器的 Axios 实例，是 Vue 项目里最稳妥、最常用的网络请求方案。核心就是三件事：创建实例、加请求拦截、加响应拦截，全部写在一个文件里，后续所有接口都用它，不分散、不重复。
创建可配置的 Axios 实例
在 src/utils/request.js（或 src/api/request.js）中创建实例，把基础配置收口：
- baseURL 从环境变量读取（如
VITE_API_BASE_URL），方便多环境切换 - timeout 设为 10000（10 秒），避免请求无限挂起
- 默认 headers 指定
Content-Type: application/json;charset=utf-8 - 开启
withCredentials: true，如需跨域传 Cookie
请求拦截器：自动带 Token + 公共参数
每次发请求前统一处理，重点是安全和一致性：
- 从 Pinia store 或 localStorage 读取 token，拼成
Authorization: Bearer xxx放进 headers - 支持跳过鉴权：给 config 加个
skipAuth: true，登录页、注册页等接口就能绕过 - 可选添加请求开始时间（
config.metadata.startTime），用于后续统计耗时 - 避免在拦截器里做 loading 显示——建议交给业务层或组合式函数控制，更灵活
响应拦截器：解构数据 + 分类错误处理
响应回来后不是直接扔给组件，而是先“拆包”和“判错”：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 假设后端返回格式是
{ code: 200, data: {}, msg: '' }，就统一提取response.data - code !== 200 时，按业务码提示：401 跳登录页，403 提示无权限，500 弹通用错误
- 网络错误（如断网、超时、CORS）走
error.response === undefined分支，单独兜底 - 错误信息尽量用 UI 组件（如 ElMessage 或 Toast）统一展示，别用 console.warn
导出封装好的请求方法（可选但推荐）
除了默认导出实例，还可额外封装常用方法，让调用更简洁：
-
export function request(config)—— 透传 axios，保留最大灵活性 -
export function get(url, params)—— 自动处理 query 参数 -
export function post(url, data)—— 默认序列化 data 为 JSON - 所有方法内部仍走同一实例和拦截器，保证逻辑一致
不复杂但容易忽略。关键不是写得多，而是把 token 注入、错误分类、环境适配这些点真正落到代码里，而不是堆在注释里。
