请求时,用blob格式去接收,设置responseType: ‘blob’

在接口返回错误时,需要将接收到的 blob 转为 json 做错误提示

接口请求

export function exportFile(queryInfo) {
  return http({
    url: 'xxx',
    method: 'get',
    params: queryInfo,
    headers: {
      'Content-Type': 'application/octet-stream'
    },
    responseType: 'blob' // 这个是重点哈!!!!
  })
}

BLOB 转 JSON 方法

// BLOB => JSON
function blobToJson (blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsText(blob, 'utf-8')
    reader.onload = () => {
      resolve(reader.result)
    }
    reader.onerror = err => {
      reject(err)
    }
  })
}

AXIOS 拦截器

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项,表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API || '',
  timeout: 60000 // 超时时间
})
// request拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    // ....
  }
)
// response拦截器
service.interceptors.response.use(
  async response => {
	  const { status, config } = response
	  // 默认正常情况
	  if(status === 200) {
	    // blob格式返回 => 错误处理
	    if (config.responseType === 'blob') {
	      const result = await blobToJson(response.data)
	      // 可以被parse为错误信息,不可以被parse为文件流形式
	      // 错误信息: { result: -1, description: 'fail' }
	      try {
	        response.data = JSON.parse(result);
	      } catch (err) {
	        return response.data
	      }
	    } else { // ... }
	},
	error => {
	  // ....
	}
)
export default service

VUE文件中使用

handleExport () {
	const res = await exportFile({
		startTime: '2020-10-12 00:00:00',
		endTime: '2021-10-12 23:59:59'
	})
	// 存在result,则默认为接口返回错误信息
	// 文件流中不存在result字段
	if (!res.result) {
	    const data = new Blob([res], {
	      type: 'application/vnd.ms-excel'
	    })
	    let blobUrl = window.URL.createObjectURL(data)
	    this.handleDownloadFile(blobUrl)
	}
}
handleDownloadFile (url) {
  const a = document.createElement('a')
  a.href = url
  a.download = `${new Date().getTime()}.xlsx`
  a.click()
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐