1、拦截器
什么是拦截器?
在请求前或响应被处理前拦截他们,分为两种:请求拦截器与响应拦截器。
拦截器的使用方法
请求拦截器
// 请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求前做些什么
return config;
}, err=>{
// 在请求错误的时候的逻辑处理
return Promise.reject(err)
});
响应拦截器
// 响应拦截器
axios.interceptors.response.use(res => {
// 在请求成功后的数据处理
return res;
}, err=>{
// 在响应错误的时候的逻辑处理
return Promise.reject(err)
});
取消拦截器
let inter = axios.interceptors.request.use(config=>{
config.header={
auth:true
}
return config
})
axios.interceptors.request.eject(inter)
实用举例A:登录权限
需要token的接口实例
let instance = axios.create({ });
instance.interceptors.request.use(config=>{
config.headers.token = '';
return config
})
不需要token的接口实例
let newInstance = axios.create({ });
实用举例B:移动端开发数据加载loading动画
// 请求的加载动画loading
let instance_phone = axios.create({ });
instance_phone.interceptors.request.use(config=>{
$('#loading').show();
return config
})
instance_phone.interceptors.response.use(res=>{
$('#loading').hide();
return res
})
备注:实现的效果是请求数据的时候显示loading动画,数据响应后隐藏loading动画。