淺析AngularJs HTTP響應攔截器_AngularJS

來源:互聯網
上載者:User

為何要用攔截器?

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

 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響應攔截器的相關知識,希望本文分享能夠給大家帶來協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.