【Issues】axios如何获取responseType为blob的请求的错误信息

问题背景

axios请求下载文件时会设置responseType: 'blob’来处理，此时如果响应数据错误，则无法下载文件且同时没有把相关的错误信息提示处理。因为返回的是Blob 对象，无法获取到普通对象中的错误信息。

例如：

{"code":450002,"data":null,"msg":"下载出错"}

这就需要在下载文件时做响应数据的处理。以下是通过axios响应拦截器的处理。

解决方案

1、首先判断响应数据Bolb类型，如果错误信息是一个 JSON 格式的 Blob，那么读取 Blob 的内容并解析为 JSON 对象

axios.interceptors.response.use(
  response => {
    // 对响应进行处理
    return response;
  },
  error => {
    // 处理请求错误
    if (error.response && error.response.data instanceof Blob && error.response.data.type === 'application/json') {
      // 如果错误信息是一个 JSON 格式的 Blob，那么读取 Blob 的内容并解析为 JSON 对象
      return error.response.data.text().then(text => {
        const json = JSON.parse(text);
        console.log(json);
        // 返回一个包含错误信息的 Promise 对象
        return Promise.reject(json);
      });
    }
    // 如果错误信息不是一个 JSON 格式的 Blob，那么返回原始的错误对象
    return Promise.reject(error);
  }
);

在这个示例中，我们检查了错误对象的 response.data 是否为 Blob 对象，且 MIME 类型为 application/json，如果是，我们就使用 text() 方法将 Blob 对象的内容读取为字符串，然后解析为 JSON 对象并打印出来。最后，我们返回一个包含错误信息的 Promise 对象，以便后续处理。

2、如果错误信息是正常响应返回的，那Bolb的类型则需要在response里面去处理，例如：

axios.interceptors.response.use(
response => {
if (response.data) {
  // 判断Bolb类型是否有错误信息
  if (
      res.data instanceof Blob &&
      res.data.type === 'application/json'
  ) {
    let reader = new FileReader()
      reader.readAsText(res.data, 'utf-8')
      reader.onload = function(e) {
          let data = JSON.parse(e.target.result)
          if (data.code !== 0) {
              Message.error(data.msg)
          }
      }
      return Promise.resolve(res)
  }
})