1、一个vue项目中需要同时配置一个php环境axios请求、一个java环境axios请求。
第一个axios默认baseUrl
第二个java axios直接域名+接口拼接 去覆盖baseurl
其它默认配置 按需处理
axios.get(`${url.javaApiUrl}${api}`, {
params: {
...data,
},
});
2、配置axios content-type
常规格式如下
switch (method) {
case 'get' || 'GET': // GET请求方式
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
break;
case 'file': // 文件上传请求
axios.defaults.headers['Content-Type'] = 'multipart/form-data';
break;
default: // 其他请求方式
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';
break;
}
3.在配置文件下载时,获取后台返回信息,可使用readFile()转化blob onload进行读取
/**
* 数据流导出专用axios请求
*/
import axios from 'axios';
import url from './url';
import store from '@/store';
import { Message } from 'element-ui';
const axiosExport = (method, fileName) => {
let myUrl = url.apiUrl + method;
if (store.state.sourceId && store.state.auth.type === 4) { // 除登录接口之外,每次传递参数都需要携带token
let sourceId = store.state.sourceId;
myUrl = myUrl + '&sourceId=' + sourceId;
}
return new Promise((resolve, reject) => {
axios({
method: 'get',
url: myUrl,
responseType: 'blob'
})
.then((response) => {
console.log(response);
// 将文件流转成blob形式
const blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});
let reader = new FileReader();
reader.readAsText(blob);
reader.onload = (e) => {
let res = '';
try {
res = JSON.parse(e.target.result);
} catch {
//
}
if (res && res.code === 101) {
Message(res.errorMsg);
} else {
resolve(response);
let filename = fileName + '.xls';
if(window.navigator.msSaveOrOpenBlob) {// 兼容IE10
navigator.msSaveBlob(blob, filename);
} else {
// 创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件
const elink = document.createElement('a');
elink.download = filename;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
}
};
}).catch((error) => {
console.log(error);
reject(error);
});
});
};
export default axiosExport;
4、axios post下载文件
/**
* 数据流导出专用axios请求
*/
import axios from 'axios';
import url from './url';
import store from '@/store';
const axiosPostExport = (method, fileName, data) => {
let myUrl = url.apiUrl + method;
if (store.state.sourceId && store.state.auth.type === 4) { // 除登录接口之外,每次传递参数都需要携带token
let sourceId = store.state.sourceId;
myUrl = myUrl + '&sourceId=' + sourceId;
}
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: myUrl,
responseType: 'blob',
data: data,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
.then((response) => {
console.log(response);
resolve(response);
// 将文件流转成blob形式
const blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});
let filename = fileName + '.xls';
if(window.navigator.msSaveOrOpenBlob) {// 兼容IE10
navigator.msSaveBlob(blob, filename);
} else {
// 创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件
const elink = document.createElement('a');
elink.download = filename;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
}).catch((error) => {
console.log(error);
reject(error);
});
});
};
export default axiosPostExport;