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搭建项目的 ...
 
随机推荐
- WebClient请求接口,get和post方法
			
1,get方式 string URI = "url"; //实例化 WebClient client = new WebClient(); // client.UseDefault ...
 - 基于Senparc.CO2NET 缓存策略扩展的缓存使用方法
			
没啥说的,直接上代码 1.缓存 CacheFactory 实现: //---------------------------------------------------------------- ...
 - /bin/bash^M:损坏的解释器: 没有那个文件或目录
			
由于在Windows下换行是\n\r,在Linux下打开多了\r,所以需要删除.删除命令 :sed -i 's/\r$//' filename -i插入 s替代模式 \r$表示任何以\r结束的字符 整 ...
 - java 一个类调用另一个类的方法
			
在要调用的类B中对调用类A实例化(在B中:A a = new A();a.function();)
 - (选择不相交区间)今年暑假不AC hdu2037
			
今年暑假不AC Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
 - 数据库MySQL
			
--IN 关键字 在.....里 SELECT * FROM zhangwu WHERE money IN (66,666,700); 1.主键约束 特点非空 只用于表示當前的记录 primary k ...
 - C# 封装SqlBulkCopy,让批量插入更方便
			
关于 SqlServer 批量插入的方式,前段时间也有大神给出了好几种批量插入的方式及对比测试(http://www.cnblogs.com/jiekzou/p/6145550.html),估计大家也 ...
 - bzoj2333 离线 + 线段树
			
https://www.lydsy.com/JudgeOnline/problem.php?id=2333 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i],接下来 ...
 - stock
			
version: 1 disable_existing_loggers: False formatters: simple: format: "%(asctime)s - %(name)s ...
 - Linux记录-HDFS副本机制
			
1. 副本策略 NameNode具有RackAware机架感知功能,这个可以配置. 若client为DataNode节点,那存储block时,规则为:副本1,同client的节点上:副本2,不同机架节 ...