Axios v1中transformResponse导致JSON未解析的问题咨询

核心原因：Axios v1 对 transformResponse 的逻辑做了重大调整 #

1. 自定义transformResponse会跳过默认JSON解析
   在Axios v0.x版本中，就算你自定义了transformResponse，框架也会先自动完成JSON解析，再把解析后的对象传给转换函数。但v1版本改了这个逻辑：只要你自定义了transformResponse，默认的JSON自动解析步骤就会被跳过，直接把原始的响应字符串传给你的函数。

你现在的代码里用({ data })解构参数，实际上拿到的是整个原始响应字符串，解构出来的data是undefined，camelcaseKeys(undefined)返回的结果不符合预期，最终导致你拿到的是未解析的原始JSON字符串。

2. 编辑器灰显是类型不匹配导致的
   Axios v1更新了类型定义，transformResponse的参数类型从“解析后的JS对象”变成了“原始响应数据（字符串/ArrayBuffer等）”。你的代码里用解构{ data }的方式完全不符合新的参数类型，编辑器识别到这一点后，就会把这个参数标记为未正确使用，从而灰显。

3. 响应头Content-Type的额外影响
   你的响应头是application/vnd.api+json，虽然你设置了Accept: application/json和responseType: 'json'，但Axios默认的自动解析逻辑只会对Content-Type严格匹配application/json的响应生效。不过这个问题在你自定义transformResponse后被放大了——因为默认解析被跳过，你必须手动处理解析步骤。

修复方案 #

有两种常见的修复方式：

方案1：手动在transformResponse里解析JSON

直接处理原始响应字符串，先解析成JS对象再转驼峰：

const login = () => {
  return axiosInstance.get('/auth/login', {
    transformResponse: (rawData) => {
      const parsedData = JSON.parse(rawData);
      return camelcaseKeys(parsedData);
    },
  });
};

方案2：复用Axios默认的transformResponse逻辑

如果你想保留框架默认的解析逻辑（比如自动处理不同Content-Type的情况），可以把默认转换函数和自定义函数组合起来：

const login = () => {
  return axiosInstance.get('/auth/login', {
    transformResponse: [...axios.defaults.transformResponse, (data) => camelcaseKeys(data)],
  });
};

这种方式会先执行Axios内置的解析流程，再把解析后的对象传给你的驼峰转换函数，和v0.x版本的行为一致。

额外优化：调整实例配置适配响应头

如果你的接口普遍返回application/vnd.api+json类型，可以在Axios实例里配置responseType: 'json'的同时，添加默认的transformResponse处理，或者设置axios.defaults.headers.post['Accept'] = 'application/vnd.api+json'，让请求头和响应头更匹配。

内容的提问来源于stack exchange，提问作者Josh Doe