很多时候我们需要在发送请求和响应数据的时候做一些页面处理，比如在请求服务器之前先判断以下用户是登录(通过token判断),或者设置请求头header，或者在请求到数据之前页面显示loading等等，还有在响应到数据的之后做一些判断，例如服务器返回401登录状态失效，需要重新登录的时候，跳转到登录页，请求成功后关闭页面loading等，这个时候我们就可以用到axios拦截器来做这一系列的事情。
axios拦截器分为请求拦截器和响应拦截器两种。
请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么，例如加入token
.......
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
响应拦截器
axios.interceptors.response.use(function (response) {
// 在接收响应做些什么，例如跳转到登录页
......
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
完整代码：
export function request(config) {
// 1、创建axios实例
const instance = axios.create({
baseURL: "http://106.54.54.237:8000/api/v1",
timeout: 10000
});
// 2、axios的请求拦截器
instance.interceptors.request.use(
req => {
Toast.loading({
// loading的时候禁止点击
forbidClick: true,
message: "加载中..."
});
return req; //拦截完再发送出去
},
err => {
return Promise.reject(err);
}
);
// 3、axios的响应拦截器
instance.interceptors.response.use(
res => {
// 保证最少500毫秒的加载时间
setTimeout(() => {
Toast.clear();
}, 500);
return res.data; //拦截完再返回数据
},
err => {
return Promise.reject(err);
}
);
//发送真正的请求
return instance(config);
}
https://blog.csdn.net/weixin_39378691/article/details/83750056