Vue 3 中响应拦截器怎么对返回的驼峰命名转换为下划线-Vue.js-PHP中文网

Vue 3 本身不提供响应拦截器，该功能由 axios 等 HTTP 客户端实现；将驼峰转下划线虽可行但不推荐，因破坏 JS 访问习惯、冲突 TypeScript 类型与 Vue 响应式，且易引发性能与维护问题。

vue 3 中响应拦截器怎么对返回的驼峰命名转换为下划线

Vue 3 本身不提供“响应拦截器”功能，这个能力来自 HTTP 客户端（如 axios）。所谓“对返回的驼峰命名转换为下划线”，实际是服务端返回的是驼峰字段（如 userName），前端希望在业务层统一转成下划线（如 user_name）再使用——但要注意：这通常不是推荐做法，反而更常见的是服务端返回下划线，前端转驼峰以适配 JS 变量习惯。如果你确实需要在响应拦截中把驼峰转下划线，请看下面几个关键点和实现方式。

为什么一般不这么做？

前端接收数据后转成下划线命名，会带来明显问题：

JS 对象属性含下划线（如 user_name）无法用点号安全访问（obj.user_name 可行，但失去语义连贯性）
与 Vue 响应式、TypeScript 接口、Pinia store 字段定义习惯冲突
多数团队规范是「后端返回下划线，前端自动转驼峰」，而非反过来
若服务端已用驼峰（如 Spring Boot + Jackson 默认），说明它面向 JS 生态设计，强行转下划线反而增加冗余

如果真要转：用 axios 响应拦截器 + 递归函数

假设你确认需将响应 data 中所有驼峰键名（如 createTime → create_time）批量转为下划线，可这样写：

先定义转换函数：

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

function camelToSnake(str) {
  return str.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
}

function deepCamelToSnake(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (Array.isArray(obj)) return obj.map(deepCamelToSnake);
  const result = {};
  for (const [key, value] of Object.entries(obj)) {
    const newKey = camelToSnake(key);
    result[newKey] = deepCamelToSnake(value);
  }
  return result;
}

再在 axios 拦截器中应用：

axios.interceptors.response.use(
  response => {
    if (response.data && typeof response.data === 'object') {
      response.data = deepCamelToSnake(response.data);
    }
    return response;
  },
  error => Promise.reject(error)
);

注意边界情况和风险

数据库字段映射问题（如 createTime/updateTime）：这不是响应拦截该解决的。真正原因常是后端实体类字段名（createTime）与数据库列名（create_time）不一致，应在后端配置 MyBatis 或 JPA 的字段映射（如 @Column(name = "create_time")），或开启全局驼峰转下划线（Spring Boot 中 mybatis.configuration.map-underscore-to-camel-case=true）
忽略敏感字段：比如 token、password、URL 等不应被重命名，建议在 deepCamelToSnake 中加白名单/黑名单逻辑
性能开销：深度遍历 + 正则替换对大嵌套对象有影响，生产环境慎用于高频接口（如列表页上千条数据）
类型丢失：TypeScript 接口仍按原始驼峰定义，转换后字段名不匹配，需同步维护两套类型或用 Record 放宽校验