vue 3 集成 axios 封装需三步：1. 创建实例并配置 baseurl、timeout 等；2. 请求拦截器自动注入 token、埋点字段并可选防重；3. 响应拦截器统一解包 data、按 code 处理错误（401 跳登录、403 提示权限等）；接口层仅定义 url、参数与返回类型，业务代码专注调用。
Vue 3 项目集成 Axios 并封装统一请求拦截器，关键不是“装上就行”，而是让每次发请求都自动带上 Token、超时可控、错误可捕获、业务代码只管传参和用数据。核心就三点：创建实例、加请求拦截、加响应拦截。
1. 安装并创建 axios 实例
先安装依赖：
npm install axios在 src/utils/request.ts（推荐 TS）中创建封装文件：
- 用
axios.create()初始化实例，把baseURL、timeout、headers等公共配置收口进来 -
baseURL建议从环境变量读取，比如import.meta.env.VITE_API_URL，方便开发/测试/生产切换 - 默认设
Content-Type: application/json;charset=UTF-8，避免每个接口手动写
2. 请求拦截器：自动注入认证信息
主要做三件事：带 Token、过滤空参、防重复提交（可选）
- Token 优先从 Pinia store 读取（如
useUserStore().token），比 localStorage 更可靠、响应式 - 按后端要求格式写入请求头，常见是
Authorization: Bearer xxx - 可在此处统一添加设备标识、来源渠道等埋点字段（如
config.headers['X-Source'] = 'web'） - 简单防重：对相同 URL + method 的请求，若上一个还没返回，可取消它（用
CancelToken或 AbortController）
3. 响应拦截器：统一解包与错误处理
后端返回结构通常为 { code, data, message }，这里要把它“扁平化”成业务层能直接用的数据
- 成功时提取
response.data，再判断code === 0（或 200），否则抛错交给catch处理 - 失败时分情况：401 跳登录页、403 提示无权限、500 显示通用错误提示、网络异常单独兜底
- 建议配合
ElMessage或message.error()统一弹窗，但 401/跳转类逻辑不要在这里做 UI，留到业务层或全局路由守卫
4. 接口调用层：只关心业务，不碰 axios
在 src/api/ 下按模块建文件（如 user.ts），每个方法只做一件事：定义 URL、参数类型、返回类型
- GET 请求用
params，POST 用data，TS 类型标注清晰（推荐用泛型封装返回类型） - 导出函数名语义化，如
getUserInfo()、updateProfile(payload) - 页面中直接
import { getUserInfo } from '@/api/user'，调用即得数据，完全屏蔽 axios 细节
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
