在與後臺的互動過程中，有可能對在請求和響應過程過發生的問題進行捕獲處理（如每次請求資料實現載入動畫）。Angular為我們提供了$http攔截器來實現上述需求。

什麼是攔截器？

攔截器就是在目標達到目的地之前對其進行處理以便處理結果更加符合我們的預期。Angular的$http攔截器是通過$httpProvider.interceptors陣列定義的一組攔截器，每個攔截器都是實現了某些特定方法的Factory: 

每個攔截器都可以實現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操作時被呼叫，在這裡可以進行恢復響應的操作，進行一些針對錯誤的處理。

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

})