在AngualrJS中使用$http每次向远程API发送请求,等待响应,这中间有些许的等待过程。如何优雅地处理这个等待过程呢?

如果我们在等待过程中弹出一个遮罩层,会是一个比较优雅的做法。

这就涉及到了对$http的请求响应进行拦截了。请求的时候,弹出一个遮罩层,收到响应的时候把遮罩层隐藏。

其实,$httpProvider已经为我们提供了一个$httpProvider.interceptors属性,我们只需要把自定义的拦截器放到该集合中就可以了。

如何表现呢?大致是这样的:

<div data-my-overlay>
<br/><img src="spinner.gif" /> &nbsp;&nbsp;Loading
</div>

显示加载的图片被包含在Directive中了,肯定会用到transclusion。

还涉及到一个遮罩层弹出延迟时间的问题,这个我们希望在config中通过API设置,所以,我们有必要创建一个provider,通过这个设置延迟时间。

$http请求响应遮罩层的Directive:

(function(){
var myOverlayDirective =function($q, $timeout, $window, httpInterceptor, myOverlayConfig){
return {
restrict: 'EA',
transclude: true,
scope: {
myOverlayDelay: "@"
},
template: '<div id="overlay-container" class="onverlayContainer">' +
'<div id="overlay-background" class="onverlayBackground"></div>' +
'<div id="onverlay-content" class="onverlayContent" data-ng-transclude>' +
'</div>' +
'</div>',
link: function(scope, element, attrs){
var overlayContainer = null,
timePromise = null,
timerPromiseHide = null,
inSession = false,
queue = [],
overlayConfig = myOverlayConfig.getConfig(); init(); //初始化
function init(){
wireUpHttpInterceptor();
if(window.jQuery) wirejQueryInterceptor();
overlayContainer = document.getElementById('overlay-container');
} //自定义Angular的http拦截器
function wireUpHttpInterceptor(){ //请求拦截
httpInterceptor.request = function(config){
//判断是否满足显示遮罩的条件
if(shouldShowOverlay(config.method, config.url)){
processRequest();
}
return config || $q.when(config);
}; //响应拦截
httpInterceptor.response = function(response){
processResponse();
return response || $q.when(response);
} //异常拦截
httpInterceptor.responseError = function(rejection){
processResponse();
return $q.reject(rejection);
}
} //自定义jQuery的http拦截器
function wirejQueryInterceptor(){ $(document).ajaxStart(function(){
processRequest();
}); $(document).ajaxComplete(function(){
processResponse();
}); $(document).ajaxError(function(){
processResponse();
});
} //处理请求
function processRequest(){
queue.push({});
if(queue.length == 1){
timePromise = $timeout(function(){
if(queue.length) showOverlay();
}, scope.myOverlayDelay ? scope.myOverlayDelay : overlayConfig.delay);
}
} //处理响应
function processResponse(){
queue.pop();
if(queue.length == 0){
timerPromiseHide = $timeout(function(){
hideOverlay();
if(timerPromiseHide) $timeout.cancel(timerPromiseHide);
},scope.myOverlayDelay ? scope.myOverlayDelay : overlayConfig.delay);
}
} //显示遮罩层
function showOverlay(){
var w = 0;
var h = 0;
if(!$window.innerWidth){
if(!(document.documentElement.clientWidth == 0)){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
} else {
w = document.body.clientWidth;
h = document.body. clientHeight;
}
}else{
w = $window.innerWidth;
h = $window.innerHeight;
}
var content = docuemnt.getElementById('overlay-content');
var contetWidth = parseInt(getComputedStyle(content, 'width').replace('px',''));
var contentHeight = parseInt(getComputedStyle(content, 'height').replace('px','')); content.style.top = h / 2 - contentHeight / 2 + 'px';
content.style.left = w / 2 - contentWidth / 2 + 'px'; overlayContainer.style.display = 'block';
} function hideOverlay(){
if(timePromise) $timeout.cancel(timerPromise);
overlayContainer.style.display = 'none';
} //得到一个函数的执行结果
var getComputedStyle = function(){ var func = null; if(document.defaultView && document.defaultView.getComputedStyle){
func = document.defaultView.getComputedStyle;
} else if(typeof(document.body.currentStyle) !== "undefined"){
func = function(element, anything){
return element["currentStyle"];
}
} return function(element, style){
reutrn func(element, null)[style];
}
}(); //决定是否显示遮罩层
function shouldShowOverlay(method, url){
var searchCriteria = {
method: method,
url: url
}; return angular.isUndefined(findUrl(overlayConfig.exceptUrls, searchCriteria));
} function findUrl(urlList, searchCriteria){
var retVal = undefined;
angular.forEach(urlList, function(url){
if(angular.equals(url, searchCriteria)){
retVal = true;
return false;//推出循环
}
})
return retVal;
}
}
}
}; //配置$httpProvider
var httpProvider = function($httpProvider){
$httpProvider.interceptors.push('httpInterceptor');
}; //自定义interceptor
var httpInterceptor = function(){
return {};
}; //提供配置
var myOverlayConfig = function(){
//默认配置
var config = {
delay: 500,
exceptUrl: []
}; //设置延迟
this.setDelay = function(delayTime){
config.delay = delayTime;
} //设置异常处理url
this.setExceptionUrl = function(urlList){
config.exceptUrl = urlList;
}; //获取配置
this.$get = function(){
return {
getDelayTime: getDelayTime,
getExceptUrls: getExceptUrls,
getConfig: getConfig
} function getDelayTime(){
return config.delay;
} function getExeptUrls(){
return config.exceptUrls;
} function getConfig(){
return config;
}
};
}; var myDirectiveApp = angular.module('my.Directive',[]);
myDirectiveApp.provider('myOverlayConfig', myOverlayConfig);
myDirectiveApp.factory('httpInterceptor', httpInterceptor);
myDirectiveApp.config('$httpProvider', httpProvider);
myDirectiveApp.directive('myOverlay', ['$q', '$timeout', '$window', 'httpInceptor', 'myOverlayConfig', myOverlayDirective]);
}());

在全局配置中:

(functioin(){
angular.module('customersApp',['ngRoute', 'my.Directive'])
.config(['$routeProvider, 'myOverlayConfigProvider', funciton($routeProvider, myOverlayConfigProvider){
...
myOverlayConfigProvider.setDealy(100);
myOverlayConfigProvider.setExceptionUrl({
method: 'GET',
url: ''
});
}]);
}());

AngualrJS中每次$http请求时的一个遮罩层Directive的更多相关文章

  1. 路由器安装ubuntu-16.04.1-server-amd64出现“无法安装busybox-initramfs”错误。向目标系统中安装busybox-initramfs软件包时出现一个错误。请检查/var/log/syslog或查看第四虚拟控制台以获得详细

    公司的路由器要ubuntu服务器进行路由网络功能的管理,在安装的时候出现下面的错误提示: 安装ubuntu-16.04.1-server-amd64出现“无法安装busybox-initramfs”错 ...

  2. TP框架中ajax post请求时提示404

    ajax post请求时提示404错误 TP框架中ajax post请求时提示404 找了半天是 控制器中方法有错误! 下次再遇到去控制器方法中找一步一步找,肯定能找到,我是单词拼错了!

  3. CSS创建一个遮罩层

    .layer{ width: 100%; position: absolute; left:; right:; top:; bottom:; -moz-opacity:; filter: alpha( ...

  4. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

  5. SpringMVC处理跨域请求时的一个注意事项

        由于公司对SpingMVC框架里面的东西进行了扩展,在配置SpringMVC时没有使用<mvc:annotation-driven>这个标签.而且是自己手动来配置HandlerMa ...

  6. 【Qt】无边框窗体中带有ActiveX组件时的一个BUG

    无意中发现的一个BUG,Qt5.1.1正式版首先创建一个GUI工程,拖入一个QAxWidget控件(为了使ActiveX生效,需要在.pro文件中加入CONFIG += qaxcontainer)接着 ...

  7. Tips_发送请求时添加一个随机数参数,让浏览器每次都重新发请求到服务器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. mariadb中创建外键时的一个奇怪的情况

    在建表语句中,将参照的定义放到对应的属性后面,类似于这样: create table tbl2 (id int references tbl1(id)); 发现并没有成功创建外键. 而将参照的定义放到 ...

  9. python中发送post请求时,报错“Unrecognized token 'xxxx': was expecting ('true', 'false' or 'null')”

    解决办法: 如请求参数为 data={“user”=“aaa”,“pwd”=“123456”,sign=“00000000000000”} 需要将参数data先做处理,调用函数datas=datajs ...

随机推荐

  1. 域名调整 SEO优化(nginx)

    =============================================== 2019/3/31_第1次修改                       ccb_warlock == ...

  2. [译]bootstrap-select (selectpicker)方法

    方法 .selectpicker('val') 您可以通过调用val元素上的方法来设置所选值. $('.selectpicker').selectpicker('val', 'Mustard'); $ ...

  3. Coursera台大机器学习技法课程笔记05-Kernel Logistic Regression

    这一节主要讲的是如何将Kernel trick 用到 logistic regression上. 从另一个角度来看soft-margin SVM,将其与 logistic regression进行对比 ...

  4. python用来生成的包含电话号码的python代码

    # -*- coding:utf-8 -*-#用python生产包含电话号码的代码temp = """arr = %sindex = %stel = ''for i in ...

  5. python接口自动化测试二十:函数写接口测试

    # coding:utf-8import requestsimport refrom bs4 import BeautifulSoup # s = requests.session() # 全局的s ...

  6. mysql中delete from in子查询删除失败

    遇到一个情况,想通过表1的id找到表2,删除表2中barcode关联的库存数据,然后一直不能失败,如下: delete from 库存表 where BARCODE in( select BARCOD ...

  7. DFS基础题

    hdu 1241 油田  裸DFS 题意:@代表油田 8个方向上还有@就相连 相当于求图中连通子图的个数Sample Input1 1 // n m*3 5*@*@***@***@*@*1 8@@** ...

  8. HDU 1029 某个数出现的次数大于等于(N+1)/2的是哪个 map水题

    题意:输入n个数 n为奇数 问某个数出现的次数大于等于(N+1)/2的是 哪个 输出来Sample Input51 3 2 3 3111 1 1 1 1 5 5 5 5 5 571 1 1 1 1 1 ...

  9. vtiger二次开发

    搞了快两个星期的vtiger,慢慢的摸索到了一些东西 数据库相当的复杂,已有的模块我只是分析了下页面的加载,方法的调用 大部分时间在研究怎么添加新的功能模块,今天才知道模块可以通过输入命令的方式来添加 ...

  10. 深入了解Activiti工作流流程定义

    深入了解Activiti工作流流程定义 2016-03-27| 发布: | 浏览: 2363 |保存PDF 部署流程定义 部署流程定义的流程: 1. 先获取流程引擎对象:在创建时会自动加载 class ...