Angularjs注入拦截器实现Loading效果


Posted in Javascript onDecember 28, 2015

angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果烦回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类。

什么是拦截器?

$httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。下面的例子告诉你怎么创建一个拦截器:

<!-- lang: js -->
module.factory('myInterceptor', ['$log', function($log) {
 $log.debug('$log is here to show you that this is a regular factory with injection');
 var myInterceptor = {
  ....
  ....
  ....
 };
 return myInterceptor;
}]);

然后通过它的名字添加到 $httpProvider.interceptors 数组:

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.push('myInterceptor');
}]);

先给大家展示下效果图:

Angularjs注入拦截器实现Loading效果

本文通过对httpProvider注入拦截器实现loading。

html代码

<div class="loading-modal modal" ng-if="loading">
 <div class="loading">
  <img src="<?=$this->module->getAssetsUrl()?>/img/loading.gif" alt=""/><span ng-bind="loading_text"></span>
 </div>
</div>

css代码

.modal {
 position: fixed;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 z-index: 99;
 background: rgba(0, 0, 0, 0.3);
 overflow: hidden;
}
.loading {
 position: absolute;
 top: 50%;
 background: white;
 #solution> .border-radius(8px);
 width: 160px;
 height: 72px;
 left: 50%;
 margin-top: -36px;
 margin-left: -80px;
 text-align: center;
 img {
 margin-top: 12px;
 text-align: center;
 }
 span {
 display: block;
 }
}

js代码

app.config(["$routeProvider", "$httpProvider", function ($routeProvider, $httpProvider) {
 $routeProvider.when('/', {
  templateUrl: "/views/reminder/index.html",
  controller: "IndexController"
 });
 $routeProvider.when('/create', {
  templateUrl: "/views/reminder/item/create.html",
  controller: "ItemCreateController"
 });
 $routeProvider.otherwise({redirectTo: '/'});
 $httpProvider.interceptors.push('timestampMarker');
}]);
//loading
app.factory('timestampMarker', ["$rootScope", function ($rootScope) {
 var timestampMarker = {
  request: function (config) {
   $rootScope.loading = true;
   config.requestTimestamp = new Date().getTime();
   return config;
  },
  response: function (response) {
   // $rootScope.loading = false;
   response.config.responseTimestamp = new Date().getTime();
   return response;
  }
 };
 return timestampMarker;
}]);

拦截器允许你:

通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝,导致 $http 调用失败。

通过实现 response 方法拦截响应: 该方法会在 $http 接收到从后台过来的响应之后执行,因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数,然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration),头(headers),状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝,导致 $http 调用失败。

通过实现 requestError 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。

通过实现 responseError 方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了,或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。

Javascript 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
js实现数字滚动特效
Dec 16 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
AngularJS进行性能调优的7个建议
Dec 28 #Javascript
浅析AngularJS Filter用法
Dec 28 #Javascript
jquery实现倒计时功能
Dec 28 #Javascript
基于jquery实现瀑布流布局
Jun 28 #Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 #Javascript
原生JavaScript实现瀑布流布局
Jun 28 #Javascript
js实现瀑布流的三种方式比较
Jun 28 #Javascript
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
仿京东快报向上滚动的实例
2017/12/13 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Python处理CSV与List的转换方法
2018/04/19 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
python如何保证输入键入数字的方法
2019/08/23 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
关于是否需要写商业计划书
2014/02/07 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
浪费资源的建议书
2014/03/12 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
仓库规划计划书
2014/04/28 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
党员作风建设自查报告
2014/10/23 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL