之前写过关于全局配置http拦截器的随笔，现在有个需求，在微信支付时，生成二维码，页面显示一个遮罩层，二维码页面需要每两秒请求一次接口，若返回结果为已支付，则进行页面跳转，但因为全局http中loading的存在，每两秒遮罩会闪动一次，所以此处需要配置不显示loading。

解决思路是：

1.全局声明了一个变量isShowLoading: true；

2.全局的http.js引入声明全局变量的js文件，并在http拦截器中判断isShowLoading是否为true，如果是，则加载loading

3.在main.js中引入声明全局变量的js文件，并在生成二维码的页面将isShowLoading赋值为false，当用户关闭二维码或支付成功后跳转页面时，将isShowLoading再赋值为true，完成

相关代码：（红色为重点代码）

1.http.js中相关代码

import Axios from 'axios'import router from './router'import { Loading, Message, MessageBox } from 'element-ui'import common from './assets/js/common'//引用模块进来// 超时时间Axios.defaults.timeout = 5000Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';Axios.defaults.withCredentials = trueAxios.defaults.baseURL = "https://www.chaopengjiankang.com/api"// http请求拦截器    var loadinginstaceAxios.interceptors.request.use(config => {    config.headers = {        'Content-Type': 'application/json'     }       // element ui Loading方法       if(common.isShowLoading == true){
                  loadinginstace = Loading.service({ fullscreen: true })       }   return config}, error => {   loadinginstace.close();   Message.error({         message: '网络不给力,请稍后再试'     })   return Promise.reject(error)})

2.main.js中全局引入

import Common from './assets/js/common'Vue.prototype.common = Common;

3.局部组件中修改状态值

　　　　　　　　//打开微信支付页面                if(index == 0){                    this.$axios.post("/wxPay/unifiedorder",{                        "orderId": this.orderId                    }).then((response) => {                        let res = response.data;                        if(res.code == 0){                            this.$refs.wx_mask.style.display = 'block';                            this.wxUrl = res.data;                            this.qrcode();//绘制二维码                            this.common.isShowLoading = false;//打开二维码，且未支付时关闭http拦截的loading                            //判断是否支付，进行跳转                            var count_downtimer =  setInterval(()=>{                                this.$axios.post("/wxPay/checkOrderIsPay",{                                    "orderId":this.orderId                                })                                .then((response) => {                                    this.common.isShowLoading = false;                                    let res = response.data;                                    if(res.code == 0) {                                        //支付成功                                        if(res.data == 1){                                            this.$router.push({name: 'paySuccess'});                                            clearInterval(count_downtimer);                                            this.common.isShowLoading = true;//开启http拦截的loading                                        } 　　　　　　　　　　　　　　　　　　　　　　　　//手动关闭二维码                                        if(this.$refs.wx_mask.style.display == 'none'){                                            clearInterval(count_downtimer);                                            this.common.isShowLoading = true;//关掉二维码后重新开始进行http拦截，显示loading                                        }                                    }else{                                        this.$layer.msg(res.msg);                                    }                                }).catch((err) => {                                    console.log(err);                                })                            }, 2000);                        }                    }).catch((err) =>{                        console.log("微信支付失败",err);                    })

这个方法看起来有点麻烦，不过效果实现了。希望以后能找到简便的方式