前端处理文件流时对axios进行封装

关于前端请求axios接收文件流的封装

---

1、首先创建请求实例

const service = axios.create({
  // api的base_url
  baseURL: baseUrl,
  // 设置请求超时时间30s
  timeout: 30000
})
service.apiUrl = baseUrl

2、对请求参数进行处理

service.interceptors.request.use((config) => {
    // 参数签名处理根据项目需求自拟
    config = sign(config, $config.appId, $config.appSecret, 'SHA256')
    // 根据项目要求进行严格的请求参数规范
    config.method === 'get'
      ? config.params = { ...config.params } : config.data = qs.stringify({ ...config.data })
      //身份
    const token = getToken()
    if (token) {
        //自定义请求头 加入身份信息以便后端识别
      config.headers['Authorization'] = 'Bearer ' + token
        // 将后端回传数据转换成Blob对象
      config.responseType = 'blob'
    }
    return config
  }
)

注：后端返回二进制文件流可能设置的content-type为application/octet-stream

前端使用Blob会导致后端莫名报错（媒体类型不支持），但还是能正常导出文件。

对于强迫症患者可以将后端content-type改为application/json

3、处理返回值

service.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      // 服务端定义的响应code码为0时请求成功
      // 使用Promise.resolve 正常响应
      const link = document.createElement('a')
      let blob = new Blob([response.data], {type: 'application/vnd.ms-excel'})
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.download = decodeURI(response.headers['filename']) //下载后文件名并进行转码

      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)

    } else {
        //自定义错误处理 根据需求自拟
      // 使用Promise.reject 响应
      Message.error({ content: response.data.message })
      return Promise.reject(response.data)
    }
  }, error => {
    //通用http错误码
    let message = ''
    if (error && error.response) {
      switch (error.response.status) {
        case 401:
          location.reload()
          return
        case 403:
          message = error.response.data.path + ',' + error.response.data.message
          break
        case 429:
          message = '访问太过频繁，请稍后再试!'
          break
        default:
          message = error.response.data.message ? error.response.data.message : '服务器错误'
          break
      }
      Message.error({ content: message })
      // 请求错误处理
      return Promise.reject(error)
    } else {
      message = '连接服务器失败'
      Message.error({ content: message })
      return Promise.reject(error)
    }
  }
)

 

 

写在最后：如果解决了您的问题烦请粉下博主，激励博主去分享问题解决办法。谢谢