Vue 3 中响应拦截器怎么在收到数据前进行统一的数据格式校验-Vue.js-PHP中文网

响应拦截器适合在http响应到达后、交付前校验数据结构，核心是提取response.data并验证code、data字段存在性及类型，对异常code统一转错误，为空data兜底，默认返回清洗后的data。

vue 3 中响应拦截器怎么在收到数据前进行统一的数据格式校验

Vue 3 中响应拦截器本身不能在收到数据前校验——因为“收到数据前”这个时间点并不存在：Axios 的响应拦截器触发时机是 HTTP 响应已完整到达（状态码、headers、body 全部就绪），但尚未交还给调用方（比如 await api.get()）时。所以它天然适合做响应后、交付前的统一格式校验与处理。

响应拦截器里怎么校验数据结构

核心逻辑是：在 response 对象中提取真实业务数据（通常是 response.data），再按约定规则判断其是否符合预期格式。常见校验点包括：

检查顶层字段是否存在，例如 data、code、message（适配后端统一返回结构如 { code: 0, data: {...}, message: "ok" }）
验证 code 值是否为成功标识（如 code === 0 或 code === 200），非成功则视为业务错误，不抛出网络异常，而是走自定义错误流程
确认 data 字段类型正确（比如要求是对象或数组，避免后端返回 null 或字符串导致组件渲染报错）
对空数据兜底，例如当 data 为 null 或 undefined 时，主动替换为默认值（{} 或 []），防止下游组件解构失败