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

Question

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

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

我曾尝试从Laravel后端以纯文本形式发送响应，并尝试在前端将响应转换为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) => {
      console.log('Error', error.message); //nothing
      console.log('Error', error.error); //undefined
      console.log('Error', error.data); //undefined

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

      // This fires after the blob has been read/loaded.
      reader.addEventListener('loadend', (e) => {
        const text = e.srcElement.result;
        console.log(text);
      });
     // Start reading the blob as text.
     reader.readAsText(blb);
});

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

Answer 1

我相信您可能在catch（）中错误地使用了error变量。

Axios传递一个错误对象，该对象具有响应属性，您可以在该属性中查找错误或消息。

https://github.com/axios/axios#handling-错误

在旁注中，如果您能够捕获错误服务器端，您可以尝试将内容类型标题设置为文本/普通。使用标题（'Content-Type:plain/text'）或Laravel的响应方法

Answer 2

您需要将响应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)
        })
    };
  });

更多信息

Answer 3

原因是响应类型为blob
如果出现错误，状态代码直接在异常对象中可用。然而，回应是一种promise。

你需要做的是：

.catch((error) => {
    let statusCode = error.response.status
    let responseObj = await error.response.data.text();
       :
       :

有关更多详细信息，您可以阅读留档。