/*公共加载遮罩*/
(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. 编译:ffmpeg,精简ffmpeg.exe

    网上下载的各种 ffmpeg.exe ,最少都有11M+ 而我只需要处理 mp4 和 mp3,在网上搜索了一下精简ffmpeg的文章,折腾一天,也没有完全搞定,但多少有些收获,记录一下: 从 www. ...

  2. 第二十九篇-Fragment动态用法

    效果图: 上节学习了静态添加Fragment的方法,这节学习动态添加方法. 主页面 layout.xml Fragment页面 layout2.xml 实现功能,当点击主页面的button时,将Fra ...

  3. 打印慢sql的日志

  4. Mock2 moco框架的http协议get方法Mock的实现

    首先在Chapter7文件夹下再新建一个startGet.json startget.json代码如下,因为是get请求,所以要写method关键字,有两个,一个是有参数,一个是无参数的请求. [ { ...

  5. http 请求头和响应头

    客户端发送请求过程带着的数据: 1.请求地址 2.请求方式 3.请求头 request headers 4.请求参数 https://www.juhe.cn/ 130.... 1a2b....pei ...

  6. 原生JS实现jquery的ready

    function ready(fn){ if(document.addEventListener){ //标准浏览器 document.addEventListener('DOMContentLoad ...

  7. Luogu P2336 [SCOI2012]喵星球上的点名

    题目链接 \(Click Here\)_ \(200\)行纯干货的代码,一发\(WA\)掉真的是让人窒息,幸好最后找到了锅在哪.(差点就要弃掉了\(QAQ\)) [调出来的时候真的是要高兴到哭出来了\ ...

  8. 【清北学堂2018-刷题冲刺】Contest 4

    Task 1:序列 [问题描述]  小H原本有一个由连续的正整数组成的序列,如{4,5,6}或{10,11,12,13,14,15,16},但是她最近睡眠不足,只能记得其中的一些数字.她想知道,她最少 ...

  9. node.js(基础四)_express基础

    一.前言                                                           本次内容主要包括: 1.express的基本用法 2.express中的静 ...

  10. php项目核心业务(增、删、改、查)(第三篇)

    对增删改查数据库的封装 //php对数据库的封装 //Mysql_fetach($sql)函数查询所有的 function Mysql_fetach($sql){ $conn=mysqli_conne ...