记一次 接口返回文件流或json
类型数据时,前端的兼容处理。
要求调用接口上传文件,成功时,返回值为json
,提示json
中的信息;失败时,返回值为流,下载的流文件。需要前端进行兼容判断。
大致思路:设置responseType: 'blob'
作为返回值的解析方式,统一以blob
的方式解析,然后通过FileReader.readAsText
读取blob
数据为string
,根据string
能否解析为json
判断接口返回的数据类型。
axios({
... // 请求参数
responseType: 'blob' // 设置responseType: 'blob'作为返回值的解析方式,统一以blob的方式解析
}).then(res => {
// 通过FileReader读取blob数据为string
const reader = new FileReader();
reader.onload = event => {
try {
// 将读取的string转换为json
// 若果能转换成功 => 接口返回的是json数据,提示报错信息
const json = JSON.parse(event.target.result);
if (json.success) {
this.$message.success(json.msg)
}
} catch (err) {
// 不能被转换成json => 接口返回的是blob, 下载blob文件
let href = window.URL.createObjectURL(res )
let saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
saveLink.href = href
saveLink.download = filename
document.body.appendChild(saveLink)
let event = document.createEvent('MouseEvents')
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
saveLink.dispatchEvent(event)
// 删除标签 解决火狐兼容问题(异步删除)
setTimeout(() => {
document.body.removeChild(saveLink)
window.URL.revokeObjectURL(href)
}, 0)
}
};
reader.readAsText(res);
})