之前写过关于全局配置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 = 5000 Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; Axios.defaults.withCredentials = true Axios.defaults.baseURL = "https://www.chaopengjiankang.com/api" // http请求拦截器 var loadinginstace Axios.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); })
这个方法看起来有点麻烦,不过效果实现了。希望以后能找到简便的方式