首页 技术设计 前端 js

axios 设置 instance.defaults.responseType = 'blob’请求下载导出一个文件，请求成功时返回的是一个流形式的文件，正常导出文件。但是请求失败的时候后端返回的是 json ，不会处理错误信息，而是直接导出包含错误信息的文件。这样拿到 data 中的数据就只有 size type 类型

这种情况，通常在封装的 axios 中我们都是以后端返回的 code 值进行判断，因此就没有办法获取到后端返回的错误信息进行提示；

因此我们有俩个思路

  1. 要不给后端传 instance.defaults.responseType = 'json’格式 然后请求成功之后将 json 格式转化成 blob 在进行导出

  2. 要不就是给后端传 instance.defaults.responseType = 'blob’请求失败之后讲 blob 转化成 json 格式，

这里介绍 blob 转化成 json 格式：

service.interceptors.response.use(
  response => {
    if (response.headers['content-type'] === 'application/json') {
      const res = response.data
      // 导出失败之后的处理
      if (res.size) { 
        // 将 blob 转为 json
        const reader = new FileReader()
        let parseObj = null
        reader.readAsText(response.data, 'utf-8')
        reader.onload = function() {
          parseObj = JSON.parse(reader.result)
          Message.error(parseObj.message || 'Error')
        }
        return Promise.reject(new Error(res.message || 'Error'))
      } 
    } else {
      return response
    }
  }