当 responseType 是带有 VueJs 的 Axios 中的 blob 时，如何读取 http 错误？答案

【问题标题】：How can I read http errors when responseType is blob in Axios with VueJs?当 responseType 是带有 VueJs 的 Axios 中的 blob 时，如何读取 http 错误？
【发布时间】：2019-10-10 16:28:05
【问题描述】：

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

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

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

我已尝试读取错误响应标头，但没有成功。

公信力（{ 网址：'xxxx'，方法：'GET'，响应类型：'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) => { 常量文本 = e.srcElement.result; 控制台.log（文本）； }); // 开始将 blob 作为文本读取。 reader.readAsText(blb); });

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

【问题讨论】：

How can I get the status code from an http error in Axios?的可能重复
@tony19 你提到的问题中没有关于 blob 的内容。
@Tarasovych responseType 字段与状态码无关，无论如何都以相同的方式访问。
您可能会发现这很有帮助：Error Response for blob type。这是一个类似的问题，有几个解决方案。
@Sai，请检查其中一个答案是否解决了您的问题，并将其标记为已接受。

标签： json laravel vue.js axios blob

【解决方案1】：

原因是响应类型是blob。
如果出现错误，状态代码可直接在您的异常对象中使用。但是，响应是一个承诺。

你需要做的是：

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

更多详情可以read documentation。

【讨论】：

只需将 responseObj 解析为 JSON，然后尝试尝试捕获它...但是谢谢，为我节省了很多 Reader 的东西。

【解决方案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)
        })
    };
  });

了解更多info

【讨论】：

【解决方案3】：

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

Axios 传递一个错误对象，该对象具有 response 属性，您可以在该属性中查找 error 或 message。

https://github.com/axios/axios#handling-errors

附带说明，如果您可以捕获错误服务器端，您可以尝试将Content-type 标头设置为text/plain。使用header('Content-Type: plain/text') 或Laravel's Response Methods

【讨论】：

【解决方案4】：

您可以这样做，如果它是一个 blob，它会将错误转换为 JSON，或者让响应数据按照接收到的方式进行处理。

  let errorString = error.response.data;
  if (
      error.request.responseType === 'blob' &&
      error.response.data instanceof Blob &&
      error.response.data.type &&
      error.response.data.type.toLowerCase().indexOf('json') != -1
  ) {
    errorString = JSON.parse(await error.response.data.text());
  }
  
  alert(errorString);

【讨论】：

【解决方案5】：

use err.response.status

     Axios ({ 
        url: 'xxxx', 
        method: 'GET', 
        responseType: 'blob', 
        }) 
    .then ((response) => { 
        // code pour lire la réponse et créer l'URL de l'objet avec le blob et télécharger le document 
    }) 
    .catch ((error) => { 
      console.log ('status', error.response.status); 
 ; 
 
});
    ```

【讨论】：