Vue 3 中 Axios 怎么在响应拦截器中自动转换下划线命名为驼峰-Vue.js-PHP中文网

Vue 3 中可用 Axios 响应拦截器自动将下划线字段（如 user_name）转为驼峰（userName），通过递归遍历 response.data 并用正则 /\_(\w)/g 替换，跳过 Date、RegExp 等非对象类型，建议深拷贝后转换且仅处理 data 字段。

vue 3 中 axios 怎么在响应拦截器中自动转换下划线命名为驼峰

在 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;