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);
})
这个方法看起来有点麻烦,不过效果实现了。希望以后能找到简便的方式
vue 配置了全局的http拦截器,单独某个组件不需要这个拦截器,如何设置的更多相关文章
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- springmvc3 拦截器,过滤ajax请求,判断用户登录,拦截规则设置
web.xml设置:(/拦截所有请求) <servlet> <servlet-name>dispatcher</servlet-name> <servlet- ...
- Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解)
不多说,直接上干货! 一.自定义拦截器类型必须是:类全名$内部类名,其实就是内部类名称 如:zhouls.bigdata.MySearchAndReplaceInterceptor$Builder 二 ...
- 【SpringCloud】Ribbon如何自定义客户端配置和全局配置
起因 事情的起因是这样的,公司内部要实现基于Zuul网关的灰度路由,在上线时进行灰度测试,故需要配置业务微服务向Eureka注册的metadata元数据,和自定义Ribbon的负载规则达到只访问灰度服 ...
- Vue自动化注册全局组件脚本
今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js写 Vue.component(name, instance) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比 ...
- 项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
vue项目创建 环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ 2.安装cnpm: >: npm install -g cnpm --regis ...
- 第三章、vue-项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
目录 vue项目创建 环境 创建项目 重构项目目录 文件修订:目录中非配置文件的多余文件可以移除 全局配置:全局样式.配置文件 axios前后台交互 cookies操作 element-ui页面组件框 ...
- vue 自动注册全局组件
vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...
- 集群通信组件tribes之通道拦截器
拦截器应该可以说是一个很经典的设计模式,它有点类似于过滤器,当某信息从一个地方流向目的地的过程中,可能需要统一对信息进行处理,如果考虑到系统的可扩展性和灵活性通常就会使用拦截器模式,它就像一个个关卡被 ...
随机推荐
- c# 观察者模式 匿名方法与Lambda
//匿名方法 //和委托搭配使用 //方便我们快速对委托进行传参 //不需要我们去定义一个新的函数 //直接用delegate关键字代替方法名,后面跟上参数列表与方法体 //delegate(参数列表 ...
- 刘志梅201771010115.《面向对象程序设计(java)》第十四周学习总结
实验十四 Swing图形界面组件 实验时间 20178-11-29 1.实验目的与要求 (1)设计模式:反复使用.经过分类编目的.代码设计经验的总结. 在Alexander的模式分类和软件模式的分类 ...
- python,运算符,基本数据类型
a = 'py' in 'python' b = 'py' not in 'python' print(a)print(b) in :判断一个前面一个字符串中的字符是否完整的出现在后面的字符串中,如果 ...
- centos7安装Jenkins
一.准备工作 机器要求: 256MB内存,建议大于512MB 10GB的硬盘空间(用于存放Jenkins镜像) 需要安装以下软件: Java (JRE或者JDK都可以) 需要可以访问公网 关闭防火墙连 ...
- vue学习笔记(一)--Tab切换
最近在学Vue,写的第一个demo是Tab,刚开始还直接把js代码贴过来改,没觉得有什么不同.然后请教别人说,用Vue最好不要操作dom啦,又把代码做了修改-_-. html代码如下: <div ...
- MySQL实现分组取组内特定数据的功能
需求:在MySQL5.7环境下,查询下面表中,各个学科前两名的学生的成绩: 1.准备数据 窗机表以及向表中插入数据 创建一张表: DROP TABLE IF EXISTS `grade`; CREAT ...
- Spring-内置Resouce
Spring 内置Resouce Resource: org.springframework.core.io.Resource; 内置方法 public interface Resource exte ...
- azkaban使用--邮件发送配置
前置条件:你的服务器是可以连外网. 当任务是异步定时的,我们对于结果的感知往往没有手动跑脚本那么及时,但是如果任何一个任务运行失败可能都会引起一些列问题,在这个情况下消息通知就很重要了,azkaban ...
- gitlab安装部署汉化
1.获取gitlab汉化包(要部署非汉化版,可以跳过这一块内容) 说明:gitlab中文社区版的项目,v7-v8.8是由Larry Li发起的“GitLab 中文社区版项目”(https://gitl ...
- Django09-中间件
一.前戏 之前通过给视图函数加装饰器来判断用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上装饰器,这样稍微有点繁 ...