Vue Axios 网络请求如何配置响应数据的自动驼峰与下划线转换

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

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

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

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

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

   const toCamelCase = str => str.replace(/_(w)/g, (_, p1) => p1.toUpperCase());

   const keysToCamelCase = obj => { ... };

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

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

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

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

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

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

注意事项与边界情况

这类转换看似简单，但容易踩坑：

1. 避免重复转换：已在响应拦截器转过驼峰的数据，若再次被其他拦截器或业务逻辑处理，可能出错
2. API 响应结构复杂时（如嵌套 data.data.list[0].extra_info），必须深度递归，不能只处理第一层
3. 某些字段名本就含数字或多个下划线（如 api_v2_token），正则需兼容，建议用更健壮的转换逻辑
4. 如果部分接口约定保留下划线（如第三方服务），可通过配置白名单绕过转换