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編碼決議
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/278890.html
標籤：其他