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

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

vue 配置了全局的http拦截器,单独某个组件不需要这个拦截器,如何设置的更多相关文章

  1. Vue基础(环境配置、内部指令、全局API、选项、内置组件)

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  2. springmvc3 拦截器,过滤ajax请求,判断用户登录,拦截规则设置

    web.xml设置:(/拦截所有请求) <servlet> <servlet-name>dispatcher</servlet-name> <servlet- ...

  3. Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解)

    不多说,直接上干货! 一.自定义拦截器类型必须是:类全名$内部类名,其实就是内部类名称 如:zhouls.bigdata.MySearchAndReplaceInterceptor$Builder 二 ...

  4. 【SpringCloud】Ribbon如何自定义客户端配置和全局配置

    起因 事情的起因是这样的,公司内部要实现基于Zuul网关的灰度路由,在上线时进行灰度测试,故需要配置业务微服务向Eureka注册的metadata元数据,和自定义Ribbon的负载规则达到只访问灰度服 ...

  5. Vue自动化注册全局组件脚本

    今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js写 Vue.component(name, instance) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比 ...

  6. 项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置

    vue项目创建 环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ ​ 2.安装cnpm: >: npm install -g cnpm --regis ...

  7. 第三章、vue-项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置

    目录 vue项目创建 环境 创建项目 重构项目目录 文件修订:目录中非配置文件的多余文件可以移除 全局配置:全局样式.配置文件 axios前后台交互 cookies操作 element-ui页面组件框 ...

  8. vue 自动注册全局组件

    vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...

  9. 集群通信组件tribes之通道拦截器

    拦截器应该可以说是一个很经典的设计模式,它有点类似于过滤器,当某信息从一个地方流向目的地的过程中,可能需要统一对信息进行处理,如果考虑到系统的可扩展性和灵活性通常就会使用拦截器模式,它就像一个个关卡被 ...

随机推荐

  1. [UE4]抓取准备

    一.引擎的VR实例工程是使用手柄进行抓取的.我们需要加上可以使用鼠标进行抓取操作. 二.将左右手保存到全局变量. 三.左右手分别调用抓取和扔方法

  2. LeetCode【112. 路径总和】

    思路就是从根节点开始向下选节点,依次与sum比较大小,若小,则向下选左右节点其中一个,若大,则接下来判断是否是叶子节点,若是,则返回false 若不是,则上一步选另一节点,再将上述重新执行. 对于叶子 ...

  3. spring ref history Design philosophy

    一.前言 Spring 框架可以说是 Java 开发人员使用的最流行的应用程序开发框架之一.它目前由大量提供一系列服务的模块组成.包括模块容器,为构建横切关注点提供支持的面向切面编程(AOP),安全框 ...

  4. spark2.1源码分析4:spark-network-common模块的设计原理

    spark-network-common模块底层使用netty作为通讯框架,可以实现rpc消息.数据块和数据流的传输. Message类图: 所有request消息都是RequestMessage的子 ...

  5. AS错误:Manifest merger failed with multiple errors, see logs

    gradlew processDebugManifest --stacktrace 在as命令行输入 回车看到 往上滑, 就能看到错误的详细信息,图中这个错误应该不是我原来的错误,是因为我按照网上的方 ...

  6. [java,2019-01-28] 枪手博弈,谁才是最后赢家

    什么是枪手博弈: 枪手博弈指彼此痛恨的甲乙丙三个枪手准备决斗.甲枪法最好,十发八中.乙枪法次之,十发六中.丙枪法最差,十发四中.假设他们了解彼此实力,也能做出理性判断. 问题一:如果三人同时开枪,并且 ...

  7. 常见java日志系统的搭配详解:关于slf4j log4j log4j2 logback jul jcl commons-logging jdk-logging

    先看一张图: 是不是有点晕, 晕就对了.这个仅仅是 slf4j 的情况,实际上, 我们不仅要接触到 slf4j ,有时候还会接触其他的日志系统.且看下文分解. 1 直接使用各个日志系统 1.1 直接使 ...

  8. python———day03

    一.字符串格式化输出: 占位符    %s(字符串) %d(整数) %f(浮点数,约等于小数) name = input("Name:") age = input("Ag ...

  9. lambda函数式编程

    一.接口注解(@FunctionalInterface) @FunctionalInterface interface Interface1 { public void print(); } publ ...

  10. MySQL表数据的增删改查

    1.增 INSERT INTO tb VALUES(v1,v2,v3...); INSERT INTO tb (field1,field2...) VALUES(v1,v2...); INSERT I ...