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 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
实例讲解php数据访问
2016/05/09 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
解决python写的windows服务不能启动的问题
2014/04/15 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
python读取Kafka实例
2019/12/23 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
优良学风班总结材料
2014/02/08 职场文书
企业宣传标语
2014/06/09 职场文书
车辆年检委托书范本
2014/10/14 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技