API接口代码
因为数据返回的是一个流文件,所以必须加上 responseType: ‘blob’
export const getExport = async params => {
try {
const data = await axios.post('/xxxxxx/xxxxx',
{ ...params },
{ responseType: 'blob' });
return data;
} catch (error) {
return Promise.reject(error);
}
};
数据请求
private async getExportData() {
try {
this.exportStatus = true;
this.exportTitle = '正在导出...';
const resp = await Service.getExport({
groupSerial: this.formData.parentSerial,
});
if (resp.data.type === 'application/vnd.ms-excel') {
const blob = new Blob([resp.data], {
type: resp.headers['Content-Type'],
});
if (resp && resp.headers['content-disposition']) {
const filename = resp.headers['content-disposition'].split('=')[1];
const link = document.createElement('a');
link.style.display = 'none';
link.href = URL.createObjectURL(blob);
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
} else {
// 错误时需要把blob 转换成json格式,并获取报错信息
await fileToJson(resp.data)
.then(res => {
this.$message.error((res as any).errorMsg);
})
.catch(error => {
/* tslint:disable */
console.log('error', '\n', error);
/* tslint:enable */
});
}
} catch (error) {
/* tslint:disable */
console.log('error', '\n', error);
/* tslint:enable */
} finally {
this.exportStatus = false;
this.exportTitle = '确定';
}
}
正确的数据返回
错误时数据返回
不管是正确还是错误请求的状态都是200 ,对于后端来说这只是一个下载功能。错误时通过axios 的响应拦截器根本不行,因为返回的status是200。但是错误时也必须要处理呀。因为我们请求时responseType: ‘blob’ ,Blob ,Blob ,Blob , 直接获取返回的错误信息是不行的。所以需要转换。代码如下,自己封装成了异步。
// 文件流到处错误是,捕获异常
export const fileToJson = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = res => {
const { result }: any = res.target; // 得到字符串
const data = JSON.parse(result); // 解析成json对象
resolve(data);
}; // 成功回调
reader.onerror = err => {
reject(err);
}; // 失败回调
reader.readAsText(new Blob([file]), 'utf-8'); // 按照utf-8编码解析
});
};