淺析AngularJs HTTP回應攔截器_AngularJS

為何要用攔截器？

任何時候，如果我們想要為請求添加全域功能，例如身份認證、錯誤處理等，在請求發送給伺服器之前或伺服器返回時對其進行攔截，是比較好的實現手段。

 angularJs透過攔截器提供了一個從全域層面進行處理的途徑.

 攔截器允許你:

透過實作 request 方法攔截請求: 該方法會在 $http 發送請求道後台之前執行，因此你可以修改設定或做其他的操作。此方法接收請求配置物件(request configuration object)作為參數，然後必須傳回配置物件或 promise 。如果傳回無效的配置物件或 promise 則會被拒絕，導致 $http 呼叫失敗。

透過實作 response 方法攔截回應: 此方法會在 $http 接收到從背景過來的回應之後執行，因此你可以修改回應或做其他操作。此方法接收回應物件(response object)作為參數，然後必須傳回回應物件或 promise。回應物件包括了請求配置(request configuration)，頭(headers)，狀態(status)和從後台過來的資料(data)。如果傳回無效的回應物件或 promise 會被拒絕，導致$http 呼叫失敗。

透過實作 requestError 方法攔截請求異常: 有時候一個請求發送失敗或被攔截器拒絕了。請求異常攔截器會俘虜那些被上一個請求攔截器中斷的請求。它可以用來恢復請求或有時可以用來撤銷請求之前所做的配置，比如說關閉進度條，激活按鈕和輸入框什麼之類的。

透過實作 responseError 方法攔截回應異常: 有時候我們後台呼叫失敗了。也有可能它被一個請求攔截器拒絕了，或是被上一個回應攔截器中斷了。在這種情況下，響應異常攔截器可以幫助我們恢復後台呼叫。

 攔截器的核心是服務工廠，透過向$httpprovider.interceptors陣列中新增服務工廠。在$httpProvider中進行註冊。

 angularJs提供四種攔截器，其中兩種成功攔截器（request、response），兩種失敗攔截器（requestError、responseError）。

  在服務中增加一種或多種攔截器：

angular.module("myApp", []) 
  .factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        ...... 
        return $q.reject(response); 
      }, 
      'response' : function(response) { 
        ...... 
        return response; 
      }, 
      'request' : function(config) { 
        ...... 
        return config; 
      }, 
      'requestError' : function(config){ 
        ...... 
        return $q.reject(config); 
      } 
    } 
  return httpInterceptor; 
} 

然後使用$httpProvider在.config()函數中註冊攔截器

angular.module("myApp", []) 
.config([ '$httpProvider', function($httpProvider) { 
  $httpProvider.interceptors.push('httpInterceptor'); 
} ]); 

  實際的例子：（對401、404的攔截）

routerApp.config([ '$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('httpInterceptor'); 
  } ]); 
  routerApp.factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        if (response.status == 401) { 
          var rootScope = $injector.get('$rootScope'); 
          var state = $injector.get('$rootScope').$state.current.name; 
          rootScope.stateBeforLogin = state; 
          rootScope.$state.go("login"); 
          return $q.reject(response); 
        } else if (response.status === 404) { 
          alert("404!"); 
          return $q.reject(response); 
        } 
      }, 
      'response' : function(response) { 
        return response; 
      } 
    } 
    return httpInterceptor; 
  }  
]); 

Session 注入(請求攔截器)

這裡有兩種方式來實現服務端的認證。第一種是傳統的 Cookie-Based 驗證。透過服務端的 cookies 來對每個請求的使用者進行認證。另一種方式是 Token-Based 驗證。當使用者登入時，他會從後台拿到一個 sessionToken。 sessionToken 在服務端標識了每個用戶，並且會包含在發送到服務端的每個請求中。

下面的 sessionInjector 為每個被捕獲的請求添加了 x-session-token 頭 (如果當前用戶已登入):

<!-- lang: js -->
module.factory('sessionInjector', ['SessionService', function(SessionService) {
  var sessionInjector = {
    request: function(config) {
      if (!SessionService.isAnonymus) {
        config.headers['x-session-token'] = SessionService.token;
      }
      return config;
    }
  };
  return sessionInjector;
}]);
module.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('sessionInjector');
}]);

然後建立一個請求:

<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos');

被 sessionInjector 攔截之前的設定物件是這樣的:

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*"
  }
}

被 sessionInjector 攔截之後的設定物件是這樣的:

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*",
    "x-session-token": 415954427904
  }
}

以上內容為大家介紹了AngularJs HTTP回應攔截器的相關知識，希望本文分享能為大家帶來幫助。