json - 使用VueJs 在Axios 中，当responseType 为blob 时，如何读取http 错误？

Question

我在我的 VueJS 应用程序中使用 blob responseType 和 Axios 从服务器下载文档。当响应代码为 200 时，它可以正常工作并下载文件，但是当出现任何 http 错误时，我无法在捕获错误时读取状态代码，因为该错误是 JSON 响应。

有没有人遇到过类似的问题，并找到了一种将 blob 响应类型转换为 json 并根据状态代码抛出错误的方法？

我尝试从 Laravel 后端以纯文本形式发送响应，并尝试在前端将响应转换为 JSON 或文本，但没有成功。

我曾尝试阅读错误响应 header ，但没有成功。

公理({
网址:'xxx'，
方法:'获取'，
responseType: 'blob',
})
.then((响应) => {
//代码读取响应并使用blob创建对象url并下载文档
})
.catch((错误) => {
console.log('错误', error.message);//什么都没有
console.log('错误', error.error);//未定义
console.log('错误', error.data);//未定义

const blb = new Blob([error], {type: "text/plain"});
const reader = new FileReader();

//在读取/加载 blob 后触发。
reader.addEventListener('loadend', (e) => {
const text = e.srcElement.result;
控制台日志(文本)；
});
//开始以文本形式读取 blob。
reader.readAsText(blb);
});

我只想根据状态代码抛出错误消息。如果它是 401 只是希望它未经授权而其他任何东西都将它扔到组件上。

Answer 1

您需要将响应 blob 转换为 json:

Axios({
    url: 'xxxx',
    method: 'GET',
    responseType: 'blob',
  })
  .then((response) => {
    //code to read the response and create object url with the blob and download the document
  })
  .catch((error) => {
    if (
      error.request.responseType === 'blob' &&
      error.response.data instanceof Blob &&
      error.response.data.type &&
      error.response.data.type.toLowerCase().indexOf('json') != -1
    ) {
      new Promise((resolve, reject) => {
          let reader = new FileReader();
          reader.onload = () => {
            error.response.data = JSON.parse(reader.result);
            resolve(Promise.reject(error));
          };

          reader.onerror = () => {
            reject(error);
          };

          reader.readAsText(error.response.data);
        })
        .then(err => {
          // here your response comes
          console.log(err.response.data)
        })
    };
  });

更多 info