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搭建项目的 ...
随机推荐
- [luogu1110][报表统计]
题目链接 思路 set+map+优先队列就可以水过去.可以发现,每插入一个元素,都会使得操作2中原来相邻的那个差值消失,然后多了两个新的差值.对于新的差值,只要直接扔到优先队列里就好了.那么删除呢.可 ...
- 利用sqlalchemy读取数据库 和pandas的Dataframe对象 互相生成
#导入pandas import pandas as pd import numpy as np #导入SqlAlchemy from sqlalchemy import create_engine ...
- IT项目管理分享7个开源项目管理工具
在一项调查中,有 71% 的组织表示他们在开发过程中会用到敏捷方法. 此外,用敏捷方法管理项目比传统方法管理项目成功率高 28%.在这次工具推荐中,我们从一些比较受欢迎的开源项目管理工具中摘取了支持敏 ...
- request的基本应用
一.安装 pip install requests (mac前面加sudo) 二.requests的一些参数 method:一般是用的那种请求方法,是get还是post,delete或者delete ...
- 使用海康的某款摄像头以及v4l2的经验
Video Capture模式下发现使用MJPEG流和YUYV流相同分辨率视野却不同. 最后没找到怎么设物理窗口或图片窗口的方法,做实验知道了为什么. 设为1280×720 YUYV实际物理窗口是19 ...
- Python模块初识
目录 一 模块初识 二 模块分类 三 导入模块 四 Python文件的两种用途 五 模板查找顺序 六 软件开发目录规范 一.模块初识 模块是自我包含并且有组织的代码片段,是一系列功能的集合体,一个py ...
- ADB interface驱动
原文地址:https://blog.csdn.net/weixin_42108952/article/details/80153402
- 16、计算1加到100用两个定义值count=1、sum=0
#!/user/bin/python# -*- coding:utf-8 -*-count = 1sum = 0while count <= 100: sum = sum + count cou ...
- JavaSE_坚持读源码_ArrayList对象_Java1.7
底层的数组对象 /** * The array buffer into which the elements of the ArrayList are stored. * The capacity o ...
- Java Web之下载文件
下载的文件,不能随便的被访问,放在外面的文件夹肯定不行,url一敲就能访问了,所以我们要放在WEB-INF文件夹里面,WEB-INF文件夹只有Servlet才能访问,我们新建一个文件夹,叫downlo ...