使用axios提供的axios.interceptors.request和axios.interceptors.response来分别实现拦截请求和响应数据。
前端在请求时可以处理请求超时和携带一些Header信息；
在响应返回时下载文件操作需要单独处理，由于后端返回的数据是一个Blob对象，responseType='blob'，如果返回的错误信息是json格式时前端需要单独做处理。
request.js
//请求拦截
imoort axios from "axios";
//请求超时处理
axios.defaults.timeout = 300000
//定义headers信息，如有需要进行添加
axios.defaults.headers.Accept= 'application/json';
//定义请求地址
axios.defaults.baseURL = "http:localhost:5000"
axios.interceptors.request.use(function (config) {
const { method, data } = config;
// header中携带其他信息
if(token){
config.headers['Authorization'] = 'Bearer ' + token;
}
//将json格式传参转成form data形式传参，如果不需要则不用做其他操作直接返回config即可
if (method.toLocaleLowerCase() === "post" && typeof data === "object") {
config.data = qs.stringify(data);
}
return config;
},(error)=>{
message.error(error.msg)
return Promise.reject(error)
});
//响应拦截
axios.interceptors.response.use(
function (response) {
const status = Number(response.status) || 200;
//没有授权，跳转登录页面
if (status === 401) {
message.error(response.data.msg);
//跳转登录页面
// xxx
return;
}
//处理文件下载操作
if (response.request.responseType === "blob") {
let _self = this;
const fileReader = new FileReader();
fileReader.readAsText(response.data);
fileReader.onload = function (e) {
try {
const result = JSON.parse(e.target.result);
if (result.code == 1) {
message.error(response.data.msg);
return Promise.reject(new Error(message));
} else {
return response;
}
} catch (e) {
return Promise.reject(new Error(response.data.msg));
}
};
} else {
if (status !== 200 || response.data.code === 1) {
message.error(response.msg);
return Promise.reject(new Error(message));
}
}
return response.data; // 返回的结果就会交给我们指定的请求响应的回调
},
function (error) {
//错误-中断Promise请求
message.error(error.msg);
return new Promise(() => {});
}
);
export default axios;
api.js
import request from "./request.js"
//封装请求方法
export const getLogin = (username, password) => {
return request.post(`/login`, { username, password });
};
