Vue 3 中可用 Axios 响应拦截器自动将下划线字段（如 user_name）转为驼峰（userName），通过递归遍历 response.data 并用正则 /\_(\w)/g 替换，跳过 Date、RegExp 等非对象类型，建议深拷贝后转换且仅处理 data 字段。
在 Vue 3 中使用 Axios 时，如果后端返回的字段是下划线命名（如 user_name、create_time），而前端统一采用驼峰命名（userName、createTime），可以在响应拦截器中做自动转换，避免每个组件手动处理。
响应拦截器内统一转换字段名
核心思路是：在 response.interceptors.response.use 的成功回调中，对 response.data 进行递归遍历，将对象所有键从下划线转为小驼峰。注意只处理普通对象和数组，跳过 Date、RegExp、null 等原生类型。
示例转换逻辑（可封装为工具函数）：
- 用正则
/_(\w)/g匹配下划线+字母，替换为大写字母 - 递归处理嵌套对象和数组中的每个元素
- 保持原始数据结构不变（不污染原对象，建议深拷贝后再转换）
实际拦截器配置写法
在你的 src/utils/request.ts 或 src/api/request.js 中配置实例时，这样写：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
立即学习“前端免费学习笔记（深入）”；
import axios from 'axios';
const service = axios.create({ baseURL: '/api', timeout: 10000 });
// 下划线 → 驼峰转换函数
function toCamelCase(str) {
return str.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
}
function deepConvertKeys(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (Array.isArray(obj)) return obj.map(item => deepConvertKeys(item));
const converted = {};
Object.keys(obj).forEach(key => {
const newKey = toCamelCase(key);
converted[newKey] = deepConvertKeys(obj[key]);
});
return converted;
}
service.interceptors.response.use(
response => {
const { data } = response;
// 只对正常业务数据做转换（比如 code === 200）
if (data && typeof data === 'object' && data.code === 200) {
response.data = { ...data, data: deepConvertKeys(data.data) };
}
return response;
},
error => Promise.reject(error)
);
export default service;
注意事项与边界情况
不是所有接口都适合无差别转换，需结合实际响应结构灵活处理：
- 若后端返回结构固定（如总包一层
{ code, msg, data }），只转换data字段即可 - 避免转换枚举值、URL、第三方字段（如微信的
openid、unionid不应变成openId）—— 可加白名单或黑名单控制 - 如果项目已用 TypeScript，转换后类型会丢失，建议配合
as断言或自定义泛型响应类型（如ResponseData<t></t>） - 不要在转换中修改 Date、Blob、File 等非 plain object 类型，防止报错
替代方案：按需转换更可控
比起全局拦截器一刀切，更推荐在具体 API 方法里做转换，例如：
- 封装
getUserInfo()时，内部调用axios.get()后立即用deepConvertKeys处理返回值 - 搭配组合式函数（composable），如
useApiData()自动应用转换规则 - 利用 Axios 的
transformResponse配置项，在单个请求中指定转换逻辑
