如何在Axios中强制响应为JSON格式并保留错误状态码？

要实现强制解析响应为JSON，同时在解析失败时保留状态码、原始响应等上下文信息，可以通过响应拦截器或自定义transformResponse函数处理，以下是具体方案：

方案一：使用响应拦截器（推荐） #

通过全局响应拦截器统一处理所有请求的响应，尝试解析为JSON，失败时抛出包含完整响应信息的错误：

// 全局添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 尝试解析响应为JSON
    try {
      // 若data已是对象（Axios自动解析过），直接返回
      if (typeof response.data === 'object' && response.data !== null) {
        return response;
      }
      // 否则手动解析
      response.data = JSON.parse(response.data);
      return response;
    } catch (parseErr) {
      // 创建自定义错误，附加原始响应和解析错误信息
      const error = new Error('响应不是有效的JSON格式');
      error.response = response; // 保留完整响应对象（含状态码、headers等）
      error.cause = parseErr; // 保留原始解析错误
      return Promise.reject(error);
    }
  },
  error => {
    // 处理请求本身的错误（如网络错误、HTTP状态码错误）
    return Promise.reject(error);
  }
);

// 发起请求
axios.get('http://cataas.com/cat?html=true')
  .then(res => console.log('解析成功:', res.data))
  .catch(err => {
    console.log(`错误信息: ${err.message}`);
    console.log(`状态码: ${err.response.status}`);
    console.log(`原始响应内容:`, err.response.data);
  });

输出示例 #

错误信息: 响应不是有效的JSON格式
状态码: 200
原始响应内容: <!DOCTYPE html>...（HTML内容）

方案二：自定义transformResponse函数 #

如果仅需针对单个请求处理，可在请求配置中自定义transformResponse，捕获解析错误并附加响应信息：

axios.get('http://cataas.com/cat?html=true', {
  responseType: 'text', // 先获取原始文本，避免Axios自动处理
  transformResponse: [function(data, headers, response) {
    try {
      return JSON.parse(data);
    } catch (parseErr) {
      const error = new Error('解析JSON失败');
      error.response = {
        data: data,
        status: response.status,
        headers: headers
      };
      error.cause = parseErr;
      throw error;
    }
  }]
})
.then(res => console.log('解析成功:', res.data))
.catch(err => {
  console.log(`错误: ${err.message}`);
  console.log(`状态码: ${err.response.status}`);
  console.log(`原始内容:`, err.response.data);
});

为什么responseType: "json"不生效？ #

Axios的responseType: "json"仅用于告知浏览器请求期望JSON格式的响应，但如果服务器返回非JSON内容且Content-Type不是application/json，Axios不会强制解析，而是直接将响应作为字符串返回，这就是你看到HTML内容被直接输出的原因。

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