• vue 配置了全局的http拦截器,单独某个组件不需要这个拦截器,如何设置


    之前写过关于全局配置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); })

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

  • 相关阅读:
    ajax GET 传输中文乱码
    php 验证码 图像存在错误 无法显示 解决方法
    ajax 简单实例
    PHP continue break 区别 用法
    php注意事项
    php7注意事项
    腾讯2015后台模拟题
    【leetcode】_3Sum
    最小的k个数 2.5
    《Hadoop权威指南》笔记 第三章 并行复制及存档
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/10735772.html
Copyright © 2020-2023  润新知