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之通道拦截器
拦截器应该可以说是一个很经典的设计模式,它有点类似于过滤器,当某信息从一个地方流向目的地的过程中,可能需要统一对信息进行处理,如果考虑到系统的可扩展性和灵活性通常就会使用拦截器模式,它就像一个个关卡被 ...
随机推荐
- [UE4]镜像
一.这是一个右手模型,通过镜像可以得到一个左右模型. 二.通过上图分析,镜面是X轴和Z轴形成的一个面,Y轴与XZ面垂直,因此就是镜像Y轴,将模型的Transform.Scale.Y设置为-1,即可得到 ...
- [UE4]让箭头保持水平
如图所示,当手柄前后左右转动的时候,箭头也会跟着转动,我们的目标是要求箭头紧贴着地面,不会跟着手柄前后左右转动. 分析上图坐标系可以知道,只要让箭头绕着Z轴转动就可以了,不需要绕着X轴和Y轴旋转.
- symfony 踩坑之旅 视频实操从第九章开始
1.annotation定义路由 @Route("/**",defaults={"name":"world"},requirements={ ...
- MySQL MGR+ Consul之数据库高可用方案
背景说明: 基于目前存在很多MySQL数据库单点故障,传统的MHA,PXC等方案用VIP或者DNS切换的方式可以实现.基于数据库的数据强一致性考虑,采用MGR集群,采用consul服务注册发现 ...
- WinForm控件--DotNetBar--SuperGridControl
//SuperGridControl控件初始化 private void ResetLayout(SuperGridControl SGC) { GridPanel panel = SGC.Prima ...
- C语言编程漫谈——main函数
写在前面 促使我写这篇文章是因为我这几天找了几个一样是大三的同学,与我相同专业相同方向(物联网)的人,除了@小胡同的诗,基本没有什么其他人会现在看起来很简单的编程题目了.问了一下其他同学,他们大部分都 ...
- Java中的升序和降序
package ah; import java.util.Arrays; import java.util.Collections; import java.util.Comparator; impo ...
- json_encode($b, JSON_FORCE_OBJECT) 可以强制转换成对象
最近在为移动端的项目提供接口,数据格式都为json,不过在过程中遇到一个小问题,代码如下: 情况一: $tmp = array('a','b','c'); echo json_encode($tmp) ...
- 字符串排序--string类的使用
最近帮他们做了一个简单的c++的题目,以前做过,当时是借鉴的别人的代码,现在也忘得差不多了,不过思路还有,现在正好可以再温习一下. 题目要求如下: 先输入你要输入的字符串的个数.然后换行输入该组字符串 ...
- 【C语言基础】循环体系
1.For循环结构: For循环的一般形式为: for (表达式1 初始化:判断条件:自增自减) { 语句块 } 2.while循环结构: while循环的一般的形式为: 表达式1 初始化 while ...