Angularjs注入拦截器实现Loading效果

 更新时间:2015年12月28日 10:54:04   投稿:mrr  
angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果反回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类

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');
}]);

先给大家展示下效果图:

本文通过对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 方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了,或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。

相关文章

  • 详解Angular5 路由传参的3种方法

    详解Angular5 路由传参的3种方法

    这篇文章主要介绍了详解Angular5 路由传参的3种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • angular4自定义表单控件[(ngModel)]的实现

    angular4自定义表单控件[(ngModel)]的实现

    这篇文章主要介绍了angular4自定义表单控件[(ngModel)]的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • AngularJS  ng-table插件设置排序

    AngularJS ng-table插件设置排序

    这篇文章主要介绍了AngularJS ng-table插件设置排序的相关资料,需要的朋友可以参考下
    2016-09-09
  • Angular 服务器端渲染应用常见的内存泄漏问题小结

    Angular 服务器端渲染应用常见的内存泄漏问题小结

    这篇文章主要介绍了Angular 服务器端渲染应用一个常见的内存泄漏问题,主要包括屏幕闪烁问题,出现闪烁的原因,在于 Angular 不知道如何重用它在服务器上成功渲染的内容,本文给大家介绍的非常详细,需要的朋友一起学习下吧
    2022-06-06
  • 对angularJs中2种自定义服务的实例讲解

    对angularJs中2种自定义服务的实例讲解

    今天小编就为大家分享一篇对angularJs中2种自定义服务的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • AngularJS压缩JS技巧分析

    AngularJS压缩JS技巧分析

    这篇文章主要介绍了AngularJS压缩JS的操作技巧,分析了AngularJS进行压缩(minify)之后出现的问题与相应的解决方法,需要的朋友可以参考下
    2016-11-11
  • angular组件间传值测试的方法详解

    angular组件间传值测试的方法详解

    这篇文章主要给大家介绍了关于如何测试angular组件间传值的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular组件具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-05-05
  • 详解AngularJS中的表格使用

    详解AngularJS中的表格使用

    这篇文章主要介绍了详解AngularJS中的表格使用,作为热门的JavaScript框架,AngularJS中提供的表格功能十分强大,需要的朋友可以参考下
    2015-06-06
  • AngularJs  Creating Services详解及示例代码

    AngularJs Creating Services详解及示例代码

    本文主要介绍AngularJs Creating Services的知识资料,这里整理了详细的资料及简单示例代码,有需要的小伙伴可以参考下
    2016-09-09
  • 利用Angularjs实现幻灯片效果

    利用Angularjs实现幻灯片效果

    AngularJS是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展、增强HTML功能,它专为构建强大的WEB应用而设计。下面这篇文章我们来分享如何利用Angularjs实现幻灯片效果。
    2016-09-09

最新评论