Axios如何处理同一接口的Blob成功响应与JSON错误响应？

你的核心问题是接口成功返回Blob格式的Excel文件，失败返回JSON错误信息，但默认Axios会自动解析响应，导致两种格式无法兼容处理。可以按以下方式调整：

关键思路 #

• 给请求配置responseType: 'blob'，让Axios不管成功失败都返回Blob格式数据
• 成功时直接处理Blob（比如生成下载链接）
• 失败时把Blob转成JSON，解析错误信息

具体代码实现 #

async function requestExcel(url, data, headObj) {
  try {
    const response = await axios.post(url, data, {
      ...headObj,
      responseType: 'blob' // 强制响应为Blob格式
    });
    
    // 验证是否是Excel文件（可选，通过响应头的Content-Type判断）
    const isExcel = response.headers['content-type']?.includes('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    if (isExcel) {
      // 处理Excel下载逻辑
      const downloadUrl = window.URL.createObjectURL(response.data);
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = '导出文件.xlsx';
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(downloadUrl);
      document.body.removeChild(link);
      return { success: true };
    } else {
      // 边缘情况：状态码200但返回错误JSON（部分接口可能这么设计）
      const errorText = await new Response(response.data).text();
      return { success: false, error: JSON.parse(errorText) };
    }
  } catch (err) {
    // 处理4xx/5xx状态码的错误，把Blob转成JSON
    if (err.response?.data instanceof Blob) {
      try {
        const errorText = await new Response(err.response.data).text();
        const errorData = JSON.parse(errorText);
        return { success: false, error: errorData };
      } catch (parseErr) {
        // 解析失败时返回通用提示
        return { success: false, error: '解析错误信息失败' };
      }
    }
    // 非Blob格式的错误直接返回
    return { success: false, error: err.response?.data || err.message };
  }
}

代码说明 #

• responseType: 'blob'是核心配置，确保所有响应都以Blob形式返回，避免Axios自动解析JSON导致Blob丢失
• 通过Content-Type判断是否为Excel文件，防止接口异常返回JSON却被当成Blob处理
• 用Response API将Blob转成文本再解析为JSON，比传统的FileReader写法更简洁
• 额外覆盖了状态码200但返回错误JSON的边缘场景，适配更多接口设计情况

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