設置了responseType:Blob之后，如果返回json錯誤信息，如果獲取？

最近做了一個文件下載功能，於是設置了responseType: Blob的方式， 什么是Blob呢，MDN官方解釋：Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不一定是JavaScript原生格式的數據（https://developer.mozilla.org/zh-CN/docs/Web/API/Blob）。

axios請求如下：

axios.get({
    url: 'xxxxxx',
    method: 'get',
    data:{},
    responseType: 'blob'
}).then(res => {

downLoadBlobFile(res.data, fileName, mimeType);  //該方法后面會給出

});

這樣子我就能正常的下載文件了，但是測試了幾個數據之后，發現有的文件下載之后打不開，如圖：

 查看接口，原來接口確實返回了正常的錯誤對象，包含錯誤碼和錯誤信息，但是因為是blob數據類型，無法捕獲，所以還是被當成文件下載下來了.

API返回：

 

js嘗試獲取返回的數據：

獲取到的是Blob數據流，我們需要將其轉化成json格式才行，方法如下：

　　　　　 let data = res.data;
          let fileReader = new FileReader();
          fileReader.onload = function() {
            try {
              let jsonData = JSON.parse(this.result);  // 說明是普通對象數據，后台轉換失敗
              if (jsonData.code) {
                   alert('fail...');
              }
            } catch (err) {   // 解析成對象失敗，說明是正常的文件流
              alert('success...');

　　　　　　　　　　downLoadBlobFile(res.data, fileName, mimeType);
            } 
         };
         fileReader.readAsText(data) 

醬紫就可以獲取到正常的json數據了，你想干嘛就干嘛啦~

 

附  downLoadBlobFile方法：

export const downLoadBlobFile = (data: Blob, fileName?: string, type?: string) => { //type為Mime類型
  let name = fileName || new Date().toLocaleDateString();
  let typeStr = type ? type : 'application/vnd.ms-excel';

  if (window.navigator.msSaveOrOpenBlob) {  //兼容性處理
    const blob = new Blob([data], { type: typeStr });
    navigator.msSaveBlob(blob, name);
  } else {
    const excelBlob = new Blob([data], { type: typeStr });
    let oa = document.createElement('a');

    oa.href = URL.createObjectURL(excelBlob);
    oa.download = name;
    document.body.appendChild(oa);
    oa.click();
  }
};

注意，參數type為MIME類型，常見文檔類型的MIME可參考MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

 

參考文檔：https://blog.csdn.net/dongguan_123/article/details/100183284