axios拦截器

Posted 2021-01-01 勇猛的人

在这个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)
                })
            }
        }
    };

这样就只在此页面移除了拦截器。