/*公共加载遮罩*/
(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请求拦截及处理的更多相关文章

  1. 细说vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cn ...

  2. vue+axois 封装请求+拦截器(请求锁+统一错误)

     需求 封装常用请求 拦截器-请求锁 统一处理错误码 一.封装常用的请求 解决痛点:不要每一个模块的api都还要写get,post,patch请求方法.直接将这些常用的方法封装好. 解决方案:写一个类 ...

  3. Vue添加请求拦截器

    一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios  , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...

  4. vue 路由拦截、axios请求拦截

    路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...

  5. vue请求拦截

    写了很多的vue项目,经常碰到需要做请求拦截的情况,从发请求前的token判断到对返回信息的响应,我自己在不同的阶段是用不同的方式处理的. 入门阶段 记得当时做的第一个项目,是需要在请求头部加入登录是 ...

  6. vue中 请求拦截 响应拦截设置

    第一,在项目的src中新建http.js文件,将以下代码复制进去 import axios from 'axios' import { Message, Loading } from 'element ...

  7. vue 路由拦截器和请求拦截器

    路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...

  8. Vue+axios 实现http拦截及路由拦截

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...

  9. Vue+axios 实现http拦截及vue-router拦截

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...

随机推荐

  1. WebClient请求接口,get和post方法

    1,get方式 string URI = "url"; //实例化 WebClient client = new WebClient(); // client.UseDefault ...

  2. 基于Senparc.CO2NET 缓存策略扩展的缓存使用方法

    没啥说的,直接上代码 1.缓存  CacheFactory 实现: //---------------------------------------------------------------- ...

  3. /bin/bash^M:损坏的解释器: 没有那个文件或目录

    由于在Windows下换行是\n\r,在Linux下打开多了\r,所以需要删除.删除命令 :sed -i 's/\r$//' filename -i插入 s替代模式 \r$表示任何以\r结束的字符 整 ...

  4. java 一个类调用另一个类的方法

    在要调用的类B中对调用类A实例化(在B中:A a = new A();a.function();)

  5. (选择不相交区间)今年暑假不AC hdu2037

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  6. 数据库MySQL

    --IN 关键字 在.....里 SELECT * FROM zhangwu WHERE money IN (66,666,700); 1.主键约束 特点非空 只用于表示當前的记录 primary k ...

  7. C# 封装SqlBulkCopy,让批量插入更方便

    关于 SqlServer 批量插入的方式,前段时间也有大神给出了好几种批量插入的方式及对比测试(http://www.cnblogs.com/jiekzou/p/6145550.html),估计大家也 ...

  8. bzoj2333 离线 + 线段树

    https://www.lydsy.com/JudgeOnline/problem.php?id=2333 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i],接下来 ...

  9. stock

    version: 1 disable_existing_loggers: False formatters: simple: format: "%(asctime)s - %(name)s ...

  10. Linux记录-HDFS副本机制

    1. 副本策略 NameNode具有RackAware机架感知功能,这个可以配置. 若client为DataNode节点,那存储block时,规则为:副本1,同client的节点上:副本2,不同机架节 ...