axios 的responseType 类型动态设置

懿伯翀
  • 133

axios请求下载导出一个文件,请求成功时返回的是一个流形式的文件,需要设置responseType: 'arraybuffer',但是请求失败的时候返回的是json ,需要用默认的responseType: 'json'来处理错误信息,那么问题来了,我该怎么根据服务器响应后才设置这个responseType?

回复
阅读 33.2k
8 个回答

请求设置了responseType: 'arraybuffer',
请求成功时,下载文件
请求失败时,后端返回json对象,如:{"msg":"系统异常","code":1,"success":false},也被转成了arraybuffer

我的解决方案是,失败时,将数据arraybuffer转成Json对象就好了。
举个例:


api.downloadFile(params).then(res => {
        if (res.status === 200 && res.data) {
          var disposition = res.headers['content-disposition']
          var fileName = decodeURI(disposition.substring(disposition.indexOf('filename=') + 9, disposition.length))
          let blob = new Blob([res.data], { type: 'application/pdf' }) // 假设文件为pdf
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          link.remove()
        } else {
           // 其它情况
        }
      }).catch(err => {
          var enc = new TextDecoder('utf-8') 
          var res = JSON.parse(enc.decode(new Uint8Array(err.data))) //转化成json对象
          console.log(res)
      })

我们不需要根据服务器返回的情况去随机设置responseType

一、我们要明白,我们在请求下载文件的api时候,可能给我们的返回值有两种情况:

  1. 直接给我们了我们想要的文件流
  2. 还有可能得到了JSON返回数据,让我们展现提示出信息或者被叫为错误信息

二、理解responseType
axios中这样描述的:responseType`表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
不过我经常用blob,其实用什么都无所谓,主要看在拿到返回值的时候如何处理。

三、处理返回值的不同情况

const API = axios.create({
  baseURL: API_HOST
})
API({
      method: 'get',
      url: file.url,
      responseType: 'blob'
    }).then(response => {
    
        const type = response.type || null
        
        //relType你所下载的文件类型,这里是xlsx
        const relType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        if (type.includes(relType)) {
          /**做文件下载 */
          
          return
        }

        if (type.includes('application/json')) {
            let reader = new FileReader()
            reader.onload = e => {
                if (e.target.readyState === 2) {
                  let res = {}
                  res = JSON.parse(e.target.result)
                  console.info('back:: ', res)
                }
           }
           reader.readAsText(response)
        }
      
    })

根据response.type返回内容的MIME TYPE 来判断是要下载文件,还是要去做一些JSON数据提示什么的操作。如果是JSON类型那就把Blob通过readAsText转为JSON格式。这种方式通过测试IE10和IE10以上版本。

作者可以尝试在arrayBuffer的情况下使用arrayBuffer to Json来进行信息提示。

辛珀
  • 2
新手上路,请多包涵

同样遇到这个问题,请问楼主后来怎么解决的呢

难道 请求失败返回的http 状态码也是 200??

var disposition = res.headers['content-disposition']

应该改为,res.headers['content-type']比较合理吧

首先了解下,axios 属性配置的优先级,

一下优先级由低到高

  • let instance = axios.create()
  • instance.defaults.timeout = 2500
  • instance.get("getcarline",{
    timeout:5000

})

根据 http status Code 的值来处理

  • http status Code:200 设置 responseType: "arraybuffer"
  • http status Code:500 设置 axios.defaults.responseType = 'json';
饼yue
  • 2
新手上路,请多包涵

刚刚解决了这个问题,现在回答一下,下面是项目中的代码
// Blob 不处理

  if (response.data instanceof Blob) {
    const relType = ['application/pdf']
    if (!relType.includes(response.data.type)) {
      let reader = new FileReader()
      reader.onload = e => {
        // @ts-ignore
        if (e.target.readyState === 2) {
          let result: any = {}
          // @ts-ignore
          result = JSON.parse(e.target.result)
          Message.error(result.message || 'Error')
        }
      }
      reader.readAsText(response.data)
      return Promise.reject('Error')
    }
    return response
  }
你知道吗?

宣传栏