版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010377383/article/details/80690297
前言
请求库:基于axios。
服务器:返回csv文件
(一) 重置request.js 通用请求库
const BASE_URL = process.env.REACT_APP_BASE_API;
const instance = axios.create({
baseURL: BASE_URL,
timeout: 10000,
});
instance.interceptors.request.use(config => {
...
return config;
});
instance.interceptors.response.use(response => {
const { data, status } = response;
if ((status >= 200 && status < 300) || status === 304) {
// responseType handle arraybuffer
if (Object.is('arraybuffer', response.config.responseType)) {
const filename = response.headers['content-disposition'] || '';
return { filename, file: data };
}
// other handle
return data;
}
const res = new Error(data.code);
res.response = response;
throw res;
}, (err) => {
...
...
});
export default instance;
export function getBufferResType(download) {
return download ? 'arraybuffer' : 'json';
}
(二) 封装api请求url
import axios, { getBufferResType } from '@/utils/request';
// download is 1, start
export function getMinerPayoutList({
download = 0,
}) {
return axios.get(`/miners/payouts`, {
// must be setting response type,
responseType: getBufferResType(download),
params: {
download,
},
});
}
(三) 封装文件处理
/**
* https://github.com/mholt/PapaParse/issues/175
* @params options
* {
* file ArrayBuffer 文件
* filename 文件名
* }
*/
downloadCSVFile({ file, filename = 'filename' }) {
const blob = new Blob([file]);
// IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
const result = filename.split(';filename=')[1];
if (result && result.endsWith('.csv')) {
filename = result;
} else {
filename = `${result || filename}.csv`;
}
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
const a = window.document.createElement('a');
a.href = window.URL.createObjectURL(blob, { type: 'text/plain' });
a.download = filename;
document.body.appendChild(a);
// IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
a.click();
document.body.removeChild(a);
}
},
(四) 后台增加返回header(axios header才拿得到content-disposition)
Access-Control-Expose-Headers: Content-Disposition
(五) 调用api
import { getMinerEarningsList } from '@/api/miners';
import Base from '@/utils/base';
...
...
// saga
const fetchOrderSaga = function* saga({ payload = {} }) {
try {
const result = yield call(getMinerEarningsList, {
...payload,
});
if (payload.download) {
Base.downloadCSVFile(result);
yield put({
type: Types.FETCH_ORDER_RESPONSE,
payload: {},
});
return false;
}
const { data: list = [], page_size, page_index, total: page_total, extra_data = {} } = result;
yield put({
type: Types.FETCH_ORDER_RESPONSE,
payload: { ...payload, list, page_size, page_index, page_total, extra_data },
});
} catch (e) {
yield put({
type: Types.FETCH_ORDER_RESPONSE,
payload: { errMsg: e.message },
});
}
};