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 相关文章推荐
JS代码同步文本框内容的实例方法
Jul 12 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 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
PHP、Java des加密解密实例
2015/04/27 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
bootstrap table实例详解
2017/01/06 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
python的常见命令注入威胁
2013/02/18 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python识别验证码的实现示例
2020/09/30 Python
几个MySql的面试题
2013/04/22 面试题
教师找工作推荐信
2013/11/23 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
2014年项目工作总结
2014/11/24 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书