Vue Axios 网络请求怎么配置响应数据的自动驼峰与下划线转换-Vue.js-PHP中文网

axios 不支持自动转换字段命名风格，需通过请求/响应拦截器配合递归键名转换函数实现：响应拦截器将下划线转驼峰（如 user_name → username），请求拦截器将驼峰转下划线（如 firstname → first_name），并注意类型判断、深度递归及边界兼容。

vue axios 网络请求怎么配置响应数据的自动驼峰与下划线转换

Axios 本身不内置驼峰（camelCase）与下划线（snake_case）字段名的自动转换能力，但可以通过拦截器 + 自定义转换函数，在请求发出前和响应返回后统一处理字段命名风格。Vue 项目中实现「响应数据自动转驼峰」或「请求数据自动转下划线」，关键在于拦截器 + 递归键名转换逻辑，而非 Axios 默认行为。

响应数据自动转驼峰（推荐在 response 拦截器中做）

后端常返回 user_name、created_at 这类下划线命名字段，前端更习惯用 userName、createdAt。可在响应拦截器中统一转换：

在 Axios 实例的 response.interceptors 中，对 response.data 执行递归驼峰化
使用正则 /_(\w)/g 替换下划线+字母为大写字母，再递归处理对象/数组所有键
确保只处理 plain object 和 array，避免影响 Date、RegExp 等原生类型
示例函数（可封装为工具）：
const toCamelCase = str => str.replace(/_(\w)/g, (_, p1) => p1.toUpperCase());
const keysToCamelCase = obj => { ... };

请求数据自动转下划线（在 request 拦截器中做）

若后端要求接收 first_name 而非 firstName，可在请求发送前将请求体（data）的键名转为下划线：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

仅对 config.method !== 'get' 的请求生效（GET 参数一般走 params，也需单独转换）
判断 config.headers['Content-Type'] 是否含 json，再决定是否序列化转换
对 config.data（如 POST body）调用下划线转换函数；对 config.params 同样处理
注意：若 data 是 FormData 或 Blob，跳过转换，避免破坏原始格式

配置示例（Vue3 + TypeScript 推荐写法）

在 src/utils/request.ts 中创建实例：

用 axios.create() 创建实例，设置 baseURL、timeout 等基础项
request 拦截器：检查 config.data 和 config.params 类型，调用 keysToSnakeCase()
response 拦截器：对 response.data 调用 keysToCamelCase()，并 return response.data（便于组件直接解构）
错误拦截器中不做字段转换，但可统一抛出标准化错误对象