在这个vue项目中在启动文件main.js中给axios配置了拦截器，此处配置后它就是全局的。在请求前会出现一个动态的loading图，在响应后隐藏此loading图。
这非常好用。在每个页面的请求数据动作中都可以享受到此福利。
但出现了另外一种情况：
有一个显示保险金支付的结果页面，后端返回的结果是异步的，前端请求此结果的时候支付状态可能是：核保成功支付中、核保成功支付失败、核保成功支付完成、核保失败4中状态。只有支付完成和核保失败的时候才是需要的最终结果，其余两种情况则需要再次轮询发送请求。
这就有问题了：
轮询间隔0.5s，那个loading图标就出现每次0.5s闪现一下的异常。这种视觉感受可不好。
于是想着解除拦截器。
但前面说了，拦截器在main.js中配置后是全局享用的，在这里去掉那么其他页面的请求loading效果都没有了。
查阅axios官网使用指南。只给出简单一句：
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);
后来想了想我就将main.js中的拦截器export出去，在结果页引入，然后移除此拦截器可否：
main.js:
// 添加请求拦截器 const requestInterceptors = axios.interceptors.request.use( config =>{ Vue.$vux.loading.show({ // 这是vux的loading text: ‘请求中‘ }) return config; }, error =>{ Vue.$vux.loading.hide() return Promise.reject(error); }); // 添加响应拦截器 const responseInterceptors = axios.interceptors.response.use( response =>{ Vue.$vux.loading.hide() return response; }, error =>{ // 对响应错误做点什么 return Promise.reject(error); }); // 为了某些组件可能需要移除这个拦截器 export { requestInterceptors, responseInterceptors}
result.vue:
import { requestInterceptors, responseInterceptors } from ‘../main‘
export default {
name: "hone",
data() {
return {
times: 0
};
},
created(){
axios.interceptors.request.eject(requestInterceptors);
axios.interceptors.response.eject(responseInterceptors);
this.getData();
},
methods: {
getData(){
this.times++;
if(this.times > 30) return;
axios.get(‘static/a.json‘).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err)
})
}
}
};
这样就只在此页面移除了拦截器。