码迷,mamicode.com
首页 > 移动开发 > 详细

axios拦截器

时间:2018-08-24 19:17:35      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:err   func   this   time   ...   use   情况   load   一个   

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

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

axios拦截器

标签:err   func   this   time   ...   use   情况   load   一个   

原文地址:https://www.cnblogs.com/wang-man/p/9531339.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!