詳解為Angular.js內建$http服務添加攔截器的方法，詳解angular.js

詳解為Angular.js內建$http服務添加攔截器的方法，詳解angular.js

前言

在Angular架構中,建立團隊為使用者進行了Ajax請求的封裝,並通過$http服務暴露出相關的介面.Angular在其官方文檔中指出, $http服務底層針對Web常見的安全攻擊做出了相應的對策,也就是說使用$http服務封裝的Ajax為使用者提供了更為安全的保障.作為一個架構,保證架構的可用性,適配性是很有必要的. Angular在設計,實現中也體現出來了這樣的良好風格.我們通常在使用Ajax時,有時候希望我們能夠在請求發起前或接收到請求後做一些相應的處理工作,比如:在請求發起前,在要求標頭中添加一下報文段.在請求返回時對一請求處理狀態做一些管理,如統一處理404狀態等等.Angular的$http服務在設計實現時充分考慮到了上述的情況.接下來,我們一起來學習和瞭解一下如何為$http服務添加攔截器,以及如何在我們自己實現的服務中實作類別似的攔截器機制.

什麼是攔截器–What are Interceptors?

Interceptor(攔截器)在服務端架構中屬於一種比較常見的機制,如spring,Struts2等Java架構中攔截器屬於基本配置項.攔截器提供了一種機制可以使開發人員可以定義在一個action(動作)執行的前後執行的代碼，這些代碼可以是在一個action執行前阻止其執行的代碼,也可以是修改目標動作某些行為的代碼.(在AOP（Aspect-Oriented Programming）中攔截器用於在某個方法或欄位被訪問之前，進行攔截然後在之前或之後加入某些操作。在Spring架構中比較常見)

$http服務中的攔截器

查看API或是源碼我們可以發現,Angular的實現中通過 httpProvider提供了一個名為interceptors的數組.這個數組接受攔截器服務註冊,通過過程次的註冊最終會形成攔截器鏈.這樣每次在調用http服務的時候,angular都會通過我們定義的攔截點(切面)進行相應的Ajax動作修改.理論就不多說了,下面開始進入實戰:

Angular中如何聲明一個攔截器

// Interceptor declarationmodule.factory('httpInterceptor', ['$log', function($log) {  $log.debug('$log is here to show you that this is a regular factory with injection');  return {       // do something      };}]);

如何將聲明的攔截器註冊到$http服務中

// Add the interceptor to $httpProvider.interceptorsmodule.config(['$httpProvider', function($httpProvider) {   $httpProvider.interceptors.push('httpInterceptor');}]);

通過上面的簡單兩個步驟,我們基本就完成了http服務的攔截器編寫與添加.但是上面的程式碼片段並不能實際使用,要想真正的實現攔截操作,我們還需要遵循http服務暴露出來的可以進行攔截的點進行相關的代碼編寫.

$httpProvider暴露了那些可以攔截的點?

1. request : request方法可以實現攔截請求: 該方法會在 http發送請求到伺服器之前執行，因此我們可以在該方法的視線中修改配置或做其他的操作。該方法接收請求設定物件(requestconfigurationobject)作為參數，然後必須返回設定物件或者promise。如果返回無效的設定物件或者promise則會被拒絕，導致http 調用失敗。
2. response : response方法可以實現攔截響應: 該方法會在 http接收到從伺服器過來的響應之後執行，因此我們可以修改響應報文或做其他動作。該方法接收響應對象(responseobject)作為參數，然後必須返迴響應對象或者promise。響應對象包括了請求配置(requestconfiguration)，頭(headers)，狀態(status)和從後台過來的資料(data)。如果返回無效的響應對象或者promise會被拒絕，導致http 調用失敗。
3. requestError : requestError方法可以實現攔截請求異常: 有時候一個請求發送失敗或者被攔截器拒絕了。請求異常攔截器會俘獲那些被上一個請求攔截器中斷的請求。它可以用來恢複請求或者有時可以用來撤銷請求之前所做的配置，比如說關閉進度條，啟用按鈕和輸入框什麼之類的。
4. responseError : responseError方法可以實現攔截響應異常: 有時候我們後台調用失敗了。也有可能它被一個請求攔截器拒絕了，或者被上一個響應攔截器中斷了。在這種情況下，響應異常攔截器可以協助我們恢複後台調用。

對於上面暴露出來的介面使用也是異常的簡單的,我們可以像聲明一個簡單的服務一樣聲明一個$http服務的攔截器,並交由angular的注入機制去使用我們配置的攔截器.

// 如同聲明一個Angular服務一樣聲明一個攔截器module.factory('sessionInjector', ['authService', function (authService){  return {    request: function (config){      if (!authService.isAnonymus) {        config.headers['x-session-token'] = authService.token;      }      return config;    }  };}]);// 然後將我們聲明的攔截器添加到$httpProvider的攔截器鏈中,之後的服務注入Angular會負責幫我們完善module.config(['$httpProvider', function ($httpProvider){  $httpProvider.interceptors.push('sessionInjector');}]);

$http服務攔截器的非同步支援

部分情境下,我們希望在攔截器中能夠執行一些非同步作業.然後依據不同的處理結果進行不同的攔截操作,AngularJS在設計的時候也很好的支援了這一特性.AngularJS允許我們在攔截的方法中,我們可以返回一個promise對象.如在http服務中,我們如果返回一個promise對象時,http服務將會延遲發起網路請求或是延遲響應請求結果.

module.factory('myInterceptor', ['$q', 'someAsyncService', function($q, someAsyncService) {  var requestInterceptor = {    request: function(config) {      var deferred = $q.defer();      someAsyncService.doAsyncOperation().then(function() {        // Asynchronous operation succeeded, modify config accordingly        ...        deferred.resolve(config);      }, function() {        // Asynchronous operation failed, modify config accordingly        ...        deferred.resolve(config);      });      return deferred.promise;    },    response: function(response) {          var deferred = $q.defer();          someAsyncService.doAsyncOperation().then(function() {            // Asynchronous operation succeeded, modify response accordingly            ...            deferred.resolve(response);          }, function() {            // Asynchronous operation failed, modify response accordingly            ...            deferred.resolve(response);          });          return deferred.promise;        }  };  return requestInterceptor;}]);

上面的例子中,在請求發起時,如果對應的deferred被拒絕，http請求則會失敗(如果進行抓包分析的話,你會發現http請求並沒有發起).在請求進行響應時,如果deferred被拒絕,則請求也會失敗.(抓包分析,網路請求是有返回的).

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。