angularjs中实现页面加载动效

爱被打了一巴掌 2022-06-17 06:15 289阅读 0赞

在与后台的交互过程中，有可能对在请求和响应过程过发生的问题进行捕获处理（如每次请求数据实现加载动画）。Angular为我们提供了$http拦截器来实现上述需求。

**什么是拦截器？**

拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过`$httpProvider.interceptors`数组定义的一组拦截器，每个拦截器都是实现了某些特定方法的Factory:

![20160627195810814][]

每个拦截器都可以实现4个可选的处理函数，分别对应请求（成功/失败）和响应（成功/失败）的拦截:

*  `request`:此函数在$http向Server发送请求之前被调用，在此函数中可以对成功的http请求进行处理，其包含一个http [config][]对象作为参数，这里对[config][]对象具有完全的处理权限，甚至可以重新构造，然后直接返回此对象或返回包含此对象的promise即可。如果返回有误，会造成$http请求失败。

2
       3
       4
       5
       6
       7
      
     
      
       1
       2
       3
       4
       5
       6
       7

*  `requestError`:此方法会在前一个拦截器抛出异常或进行了reject操作时被调用，在这里可以进行恢复请求的操作，或者进行一些对于请求时发起动作的处理（如取消loading等）；
 *  `response`:此函数在$http从Server接收到响应时被调用，在此函数中可以对成功的http响应进行处理，这里具有对响应的完全处理权限，甚至可以重新构造，然后直接返回响应或返回包含响应的promise即可。如果返回有误，会造成$http接收响应失败；
 *  `responseError`:此方法会在前一个拦截器抛出异常或进行了reject操作时被调用，在这里可以进行恢复响应的操作，进行一些针对错误的处理。

实现loading效果

define(['jquery','angular'], function($,angular){
          
        angular.module('ajaxLoading', [])
     
        .config(function($httpProvider) {
          $httpProvider.interceptors.push('loadingInterceptor');
        })
         
        .directive('loading', function() {
          return {
            replace: true,
            restrict: 'AE',
            template:'<div class="back-layer"><div class="loading">' +'<img src="images/729.GIF">' +'</div></div>',
            link: function($scope, $element, attrs) {
                var top = $(window).height()/2 - 25;
                var left = $(window).width()/2 - 25;
                $('.loading').css({
                  top: top,
                  left: left
                });
                //$(tpl).appendTo('body');
            }
          };
        })
         
        .factory('loadingInterceptor', function($q, $rootScope) {
    
          return {
            request: function(config) {
              $(".back-layer").show();
              return config || $q.when(config);
            },
            response: function(response) {
              $(".back-layer").hide();
              return response || $q.when(response);
            },
            responseError: function(rejection) {
              $(".back-layer").hide();
              return $q.reject(rejection);
            }
          };
        });
    
    })

$http作为Angular中的核心service，其功能非常强大便捷，今天主要是使用$http拦截器来实现loading效果，但是$http拦截器在与后台的交互过程中使用最多的场景是对每条请求发送到Server之前进行预处理（如加入token），或者是在Server返回数据到达客户端还未被处理之前进行预处理（如将非JSON格式数据进行转换）。

[20160627195810814]: /images/20220617/69f307e20d6a4321934553a940799f5f.png
[config]: https://docs.angularjs.org/api/ng/service/%24http#usage