vue的Http请求拦截及处理
/*公共加载遮罩*/
(function($) {
$.fn.jqLoading = function(option) {
var defaultVal = {
backgroudColor : "#ECECEC",// 背景色
backgroundImage : "/exchange/resources/images/loading.gif",// 背景图片
text : "",// 文字正在加载中,请耐心等待...
width : '1.32rem',// 宽度
height : '1.32rem',// 高度
type : 0
// 0全部遮,1 局部遮 };
var opt = $.extend({}, defaultVal, option); if (opt.type == 0) {
// 全屏遮
openLayer();
} else {
// 局部遮(当前对象应为需要被遮挡的对象)
openPartialLayer(this);
} // 销毁对象
if (option === "destroy") {
closeLayer();
} // 设置背景层高
function height() {
var scrollHeight, offsetHeight;
// handle IE 6
if ($.support.msie && $.support.version < 7) {
scrollHeight = Math.max(document.documentElement.scrollHeight,
document.body.scrollHeight);
offsetHeight = Math.max(document.documentElement.offsetHeight,
document.body.offsetHeight);
if (scrollHeight < offsetHeight) {
return $(window).height();
} else {
return scrollHeight;
}
// handle "good" browsers
} else if ($.support.msie && $.support.version == 8) {
return $(document).height() - 4;
} else {
return $(document).height();
}
}; // 设置背景层宽
function width() {
var scrollWidth, offsetWidth;
// handle IE
if ($.support.msie) {
scrollWidth = Math.max(document.documentElement.scrollWidth,
document.body.scrollWidth);
offsetWidth = Math.max(document.documentElement.offsetWidth,
document.body.offsetWidth);
if (scrollWidth < offsetWidth) {
return $(window).width();
} else {
return scrollWidth;
}
// handle "good" browsers
} else {
return $(document).width();
}
}
; /* ==========全部遮罩========= */
function openLayer() {
// 背景遮罩层
var layer = $("<div id='layer'></div>");
layer.css({
zIndex : 9998,
position : "absolute",
height : height() + "px",
width : width() + "px",
background : "black",
top : 0,
left : 0,
filter : "alpha(opacity=30)",
opacity : 0.3
}); // 图片及文字层
var content = $("<div id='content'></div>");
content.css({
textAlign : "left",
position : "fixed",
zIndex : 9999,
height : opt.height + "px",
width : opt.width + "px",
top : "50%",
left : "50%",
/*verticalAlign : "middle",*/
background : opt.backgroudColor,
/*borderRadius : "8px",*/
/*fontSize : "13px"*/
}); content
.append("<img style='vertical-align:middle;width:1.32rem;height:1.32rem;margin-left: -.66rem;margin-top: -.66rem;"
/*+ (opt.height / 4)*/
+ "/*px; 0 0 5px;margin-right:5px;*/' src='"
+ opt.backgroundImage
+ "' /><span style='text-align:center; vertical-align:middle;'>"
+ opt.text + "</span>");
$("body").append(layer).append(content);
var top = content.css("top").replace('px', '');
var left = content.css("left").replace('px', '');
content.css("top", (parseFloat(top) - opt.height / 2)).css("left",
(parseFloat(left) - opt.width / 2)); return this;
} // 销毁对象
function closeLayer() {
$("#layer,#content,#partialLayer").remove();
return this;
} /* ==========局部遮罩========= */
function openPartialLayer(obj) { var eheight = $(obj).css("height");// 元素带px的高宽度
var ewidth = $(obj).css("width");
var top = $(obj).offset().top; // 元素在文档中位置 滚动条不影响
var left = $(obj).offset().left; var layer = $("<div id='partialLayer'></div>");
layer.css({
style : 'z-index:9998',
position : "absolute",
height : eheight,
width : ewidth,
background : "black",
top : top,
left : left,
filter : "alpha(opacity=60)",
opacity : 0.6,
borderRadius : "3px",
dispaly : "block"
});
$("body").append(layer); return this;
}
}; })(jQuery) /*全局设置ajax请求拦截*/
Vue.http.interceptors.push(function(request, next){
console.log(this)//此处this为请求所在页面的Vue实例 //是否input提交
/*if(document.getElementsByTagName('input').length > 0){
var validator = new TestData();
if(!validator.TestAll()){
return ;
};
}*/
// modify request
//在请求之前可以进行一些预处理和配置
request.method = 'POST';
$.fn.jqLoading();
// continue to next interceptor
next(function(response,a,b){//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断,就添加在此处,页面中任何一次http请求都会先调用此处方法
// 取消等待效果
$.fn.jqLoading("destroy");
/*var sessionstatus = response.getResponseHeader("sessionstatus");*/
if(response.data.result == '00'){
console.log(response.data.message);
}else{
console.log(response.data.message)
}
var sessionstatus = response.headers.get("sessionstatus");
if (sessionstatus == "timeout") { }if (sessionstatus == "nopower") {
/*jsalert('用户无权限', 'exception');*/
wrap.alert('用户无权限');
} return response; });
});
vue的Http请求拦截及处理的更多相关文章
- 细说vue axios登录请求拦截器
当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cn ...
- vue+axois 封装请求+拦截器(请求锁+统一错误)
需求 封装常用请求 拦截器-请求锁 统一处理错误码 一.封装常用的请求 解决痛点:不要每一个模块的api都还要写get,post,patch请求方法.直接将这些常用的方法封装好. 解决方案:写一个类 ...
- Vue添加请求拦截器
一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...
- vue 路由拦截、axios请求拦截
路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...
- vue请求拦截
写了很多的vue项目,经常碰到需要做请求拦截的情况,从发请求前的token判断到对返回信息的响应,我自己在不同的阶段是用不同的方式处理的. 入门阶段 记得当时做的第一个项目,是需要在请求头部加入登录是 ...
- vue中 请求拦截 响应拦截设置
第一,在项目的src中新建http.js文件,将以下代码复制进去 import axios from 'axios' import { Message, Loading } from 'element ...
- vue 路由拦截器和请求拦截器
路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...
- Vue+axios 实现http拦截及路由拦截
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...
- Vue+axios 实现http拦截及vue-router拦截
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...
随机推荐
- render_template 网页模板
模板简单介绍: 视图函数:视图函数就是装饰器所装饰的方法,视图函数的主要作用是生成请求的响应,这是最简单的请求.实际上,视图函数有两个作用:处理业务逻辑和返回响应内容.在大型应用中,把业务逻辑和表现内 ...
- Day033--Python--进程
什么是进程? 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实体 ...
- decorator 装饰页面,根据不同设备自动切换移动和pc站
package com.thinkgem.jeesite.modules.sys.interceptor; import javax.servlet.http.HttpServletRequest; ...
- 使用postman测试hystrix
当在浏览器发送多次请求检测hystrix的作用时,我们可以使用postman来自动发送多次请求: 1.将链接保存到一个collection中 2.点击runner 3.设定运行次数
- NTT学习笔记
和\(FFT\)相对应的,把单位根换成了原根,把共轭复数换成了原根的逆元,最后输出的时候记得乘以原\(N\)的逆元即可. #include <bits/stdc++.h> using na ...
- 剑指Offer_编程题_18
题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ / \ ...
- kubernetes 基础一
从集群外部访问pod或service pod 在Kubernetes中,创建.调度和管理的最小单位是pod而不是容器.pod代表着一个运行着的工作单元.一般情况下,每个pod中只有一个容器(原因是为了 ...
- python3 rrdtool 使用
源自 python自动化运维:技术与最佳实践 并做略微修改 安装 yum install python-rrdtoolyum install rrdtool-devel #因为采集用了psutil模块 ...
- JDBC-C3P0
一.依赖 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...
- Dubbo服务的运行方式
1.使用Servlet容器运行(Tomcat.Jetty)等 ---不可取 缺点:增加复杂性(端口,管理) 浪费资源(内存) 2.自建Main方法类来运行(Spring容器) ---不建议(本地调试可 ...