当 responseType 是使用 Vuejs 的 blob 时，如何处理错误？答案

【问题标题】：How do I handle errors when responseType is blob using Vuejs?当 responseType 是使用 Vuejs 的 blob 时，如何处理错误？
【发布时间】：2020-07-13 10:31:21
【问题描述】：

我的问题类似于没有答案的this。我试图搜索许多其他地方，但仍然没有答案。

我正在尝试在 VueJs 中使用 Axios 作为 blob 下载文件：

return new Promise((resolve, reject) => {
      Axios.get(`${fileDownloadUrl}`,
        { responseType: 'blob' } // Blob doesn't handle errors
      ).then(response => {
        let byteData = response.data
        var blob = new Blob([byteData], {type: response.headers['content-type']})
        let fileName = _.split(response.headers['content-disposition'], '=')
        FileSaver.saveAs(blob, fileName[1])
        resolve(fileName[1])
      },
        error => {
          console.log(error.response.data) // returns Blob - error message from service is not handled
          reject(error.response.data)
        }
      )

我从上面的代码中删除了{ responseType: 'blob' } 并再次尝试，我现在收到错误消息但下载的文件没有任何内容，它是一个空白数据。

如何下载文件并处理服务返回的错误响应？

【问题讨论】：

标签： vue.js axios blob

【解决方案1】：

import axios from "axios";

// It is needed to handle when your response is not Blob (for example when response is json format)
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (
            error.request.responseType === 'blob' &&
            error.response.data instanceof Blob &&
            error.response.data.type &&
            error.response.data.type.toLowerCase().indexOf('json') != -1
        ) {
            return 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);
            });
        }
        return Promise.reject(error);
    }
);


// Now you can get response in both Blob and json format
axios.get(
    url,
    {
        responseType: 'blob'
    }
).then(response => {
    // Your Code

}).catch((error) => {
    // Your Code
    // You can get error in json format
});

【讨论】：

【解决方案2】：

使用vue-resource 解决了这个问题。虽然它将在未来的版本中退役，但我找不到更好的方法来做到这一点，因为 Axios 无法处理它。

以下是代码：

main.js

import VueResource from 'vue-resource'
Vue.use(VueResource)

service.js

return new Promise((resolve, reject) => {
  VueResource.http.get(`${fileDownloadUrl}`,
    { responseType: 'blob' }
  ).then(response => {
    methods.downloadFile(response, cid)
    resolve(cid)
  }, error => {
    reject(error)
  })
})

希望这会有所帮助。

【讨论】：