React项目中如何将Axios返回的ArrayBuffer转换为JSON格式

直接错误点 #

你代码中存在两个明显问题：

• TextDecoder.decode()入参非法：res.data本身就是标准ArrayBuffer类型，不需要套一层数组传入[res.data]，错误的入参会导致解码出无效字符串，JSON.parse解析后自然返回undefined。
• 场景预期不匹配：你当前请求的是PDF生成接口，请求头设置了Accept: 'application/pdf'，且指定了responseType: 'arraybuffer'，接口正常返回的是PDF二进制流，本身就不是JSON格式，不可能直接解析为JSON对象。

分场景处理方案 #

场景1：需要捕获该接口异常时返回的JSON错误信息 #

该场景下接口仅在请求出错时返回JSON结构的错误提示，正常响应仍为PDF流，你需要先判断响应头的Content-Type类型再做对应处理，修正后的代码如下：

axios.post(
  `${config.apiPath}/api/generatepdf`,
  {
    onlyForPdf: 'pdf',
  },
  {
    responseType: 'arraybuffer',
    headers: {
      Accept: 'application/pdf',
    },
    transformResponse: [(data, headers) => {
      const contentType = headers['content-type']
      // 响应类型为JSON时才做解析
      if (contentType?.includes('application/json')) {
        const jsonStr = new TextDecoder().decode(data)
        return JSON.parse(jsonStr)
      }
      // 正常PDF流直接返回原始数据
      return data
    }]
  }
).then((res) => {
  if (res.data instanceof ArrayBuffer) {
    // 正常响应，处理PDF流，例如下载
    const blob = new Blob([res.data], { type: 'application/pdf' })
    const downloadUrl = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = downloadUrl
    a.download = '导出文件.pdf'
    a.click()
    URL.revokeObjectURL(downloadUrl)
  } else {
    // 异常响应，打印JSON错误信息
    console.log('接口返回错误：', res.data)
  }
})

注意：如果跨域场景下拿不到完整的Content-Type响应头，需要后端配置Access-Control-Expose-Headers: Content-Type允许前端读取该头字段。

场景2：你实际需要请求返回JSON的接口 #

该场景下不需要设置responseType: 'arraybuffer'和Accept: 'application/pdf'，axios默认会自动解析JSON响应，直接读取res.data即可获取JSON对象。

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