Vue请求封装通过响应拦截器统一解构与状态码校验，依据后端约定提取code/data/message等字段，按200/401/403/404/500等码执行对应逻辑，并支持ignoreCodeCheck跳过校验。
Vue 请求封装中实现接口响应结果的统一解构与状态码校验，核心在于**响应拦截器（response interceptor）的精准配置**。它不是简单地“取 data”，而是根据后端约定，在数据到达业务层前完成标准化处理和前置校验，避免每个组件重复判断 res.code 或手动提取 res.data。
明确后端响应结构并定义成功判定规则
统一解构的前提是知道后端返回什么格式。常见结构如：
{ code: 200, message: "ok", data: { ... } }{ status: 1, msg: "success", result: { ... } }{ success: true, payload: { ... }, error: null }
在封装文件（如 src/utils/request.js）中，响应拦截器需先解构出关键字段，并基于 code（或 status、success）判断是否为业务成功。例如：
service.interceptors.response.use(
response => {
const { code, data, message, msg } = response.data
// 假设后端约定 code === 200 为成功
if (code === 200) {
return data // 直接返回业务数据，组件拿到的就是干净的 { user: ..., list: [...] }
} else {
ElMessage.error(message || msg || '请求失败')
return Promise.reject(new Error(message || '未知错误'))
}
},
error => {
// 处理网络错误、超时、4xx/5xx 等
...
}
)
支持多种状态码语义并触发对应行为
不只是判 200，要覆盖常见业务场景：
- 登录过期（401）：清除本地 token，跳转登录页
- 权限不足（403）：提示“无权操作”，不跳转
- 资源不存在（404）：提示“页面找不到了”
- 服务器异常（500）：提示“服务暂不可用”，可自动上报
- 自定义业务码（如 1001）：按后端文档映射具体含义，如“库存不足”“手机号已注册”
这些逻辑都收口在响应拦截器里，组件只关心“拿到了数据”或“报错了”，不用再写一堆 if (res.code === 401)。
允许接口层绕过默认校验
某些接口（如登录、刷新 token、上传文件）可能返回非标准结构，或需要原生响应体。可在请求配置中加标记，让拦截器跳过解构：
- 在调用时传入
ignoreCodeCheck: true - 拦截器中检查
config.ignoreCodeCheck，若为true则直接返回response而非response.data - 示例：
request.get('/login', { ignoreCodeCheck: true })
错误信息友好透出与可追溯
校验失败时，不仅要提示用户，还要方便调试：
- 将原始响应
response和error对象打日志（开发环境） - 对
message字段做空值 fallback，避免undefined导致 UI 报错 - 错误对象中保留
code、url、method，便于排查是哪个接口出了问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
