背景:
通过axios下载文件,正常情况下后端返回内容blob,前端接收并导出文件。但有时候,后端业务逻辑需要提示错误,于是返回json,但前端预期接收的是blob,所以导出去的文件内容是json字符串。
原因:
axios请求头配置了响应格式 responseType: 'blob'
javascript
const service = axios.create({
baseURL: '/'
})
javascript
// 导出用户列表
export function exportUserList(data){
return request({
url: '/admin/accelerate/duration/download',
method: 'post',
responseType: 'blob', // 指定响应内容为blob
data
})
}
解决方法:
在axios响应拦截器中,判断请求的响应类型。若预期返回blob但实际返回json,则将blob转成json字符串,然后进行错误提示。
javascript
// blob转字符串
export const blobTojsonstr = (blob) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => resolve(e.target.result);
reader.onerror = (e) => reject(e.target.error);
reader.readAsText(blob);
});
}
javascript
import { Notification } from 'element-ui'
// HTTP response 拦截
service.interceptors.response.use(
async (res) => {
const status = res.status
const responseType = res.config.responseType // 预期响应数据类型
const contentType = res.headers['content-type'] // 真实响应数据类型
let resData = null,
isBlob = ['arraybuffer', 'blob'].includes(responseType)
if (!isBlob) {
// 预期是非文件,即json
resData = res.data
} else {
// 预期是文件
if (contentType.indexOf('application/json') > -1) {
// 下载接口异常:Blob转Json后解密
isBlob = false
try {
const content = await blobTojsonstr(res.data)
resData = JSON.parse(JSON.parse(content).data)
} catch (error) {
resData = res.data
}
} else {
resData = res.data
}
}
// 不正确的状态码进行统一处理
if (!isBlob && (status !== 200 || resData.code !== 0)) {
const errMsg = resData.msg
Notification.error({
title: errMsg
})
return Promise.reject(new Error(errMsg))
}
return resData
},
(error) => {
return Promise.reject(new Error(error))
}
)
效果:
正常情况下,后端返回blob,axios接收blob并导出文件。
异常情况下,后端返回json,axios接收blob后转成json,根据错误码code提示错误。