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

Question

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

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

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' }，然后重试，我现在收到错误消息，但是下载的文件没有任何内容，它是空白数据。

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

Answer 1

使用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)
  })
})

希望这会有所帮助。