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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JS解析XML实例分析
Jan 30 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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
优化使用mysql存储session的php代码
2008/01/10 PHP
深入PHP异步执行的详解
2013/06/03 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
php适配器模式简单应用示例
2019/10/23 PHP
Javascript----文件操作
2007/01/18 Javascript
Javascript Object.extend
2010/05/18 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
简单学习vue指令directive
2016/11/03 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
考试退步检讨书
2014/01/15 职场文书
领导党性分析材料
2014/02/15 职场文书
给校长的一封建议书
2014/03/12 职场文书
财务管理制度范本
2015/08/04 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
小数乘法教学反思
2016/02/22 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers