项目中难免会遇到预览文件或者下载文件的场景,如果后台返回的是base64或者图片格式还好说,文件信息直接放在返回body里,作为对象属性给到前端,很直观,也方便取用。
但后台给到的是文件流就要麻烦一些了,一般来说文件流会直接凡在res.data里
处理这种特殊返回值时需要设置axios的responseType为blob,防止axios内部默认处理返回值,导致无法解析:
axios.get({
url: 'xxxxxx',
method: 'get',
data:{},
responseType: 'blob'
}).then(res => {
console.log(res);
});
当后台解析错误的时候,返回的就是正常的错误对象,包含错误码和错误信息,如果不做处理,那么错误状态和成功状态都是blob类型,无法捕获
但实际上错误状态是这样的形式:
所以需要对返回值做特殊处理,尝试把blob转换为json格式,如果转换成功则说明返回的数据不是文档流,后台出错,反之则文档转换正常,继续下载或预览:
axios.get({
url: 'xxxxxx',
method: 'get',
data:{},
responseType: 'blob'
}).then(res => {
let data = res.data;
let fileReader = new FileReader();
fileReader.onload = function() {
try {
let jsonData = JSON.parse(this.result);
if (jsonData.code) {
// 说明是普通对象数据,后台转换失败
// to do something
alert('not ok');
}
} catch (err) {
// 解析成对象失败,说明是正常的文件流
alert('ok');
}
};
fileReader.readAsText(data);
});
这样就可以判断返回的文件流是否是正常的了,做出合适的提示