欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析AngularJs HTTP響應(yīng)攔截器

 更新時(shí)間：2015年12月28日 11:38:39   投稿：mrr  
這篇文章主要介紹了淺析AngularJs HTTP響應(yīng)攔截器的相關(guān)資料,需要的朋友可以參考下

為何要用攔截器？

任何時(shí)候，如果我們想要為請(qǐng)求添加全局功能，例如身份認(rèn)證、錯(cuò)誤處理等，在請(qǐng)求發(fā)送給服務(wù)器之前或服務(wù)器返回時(shí)對(duì)其進(jìn)行攔截，是比較好的實(shí)現(xiàn)手段。

 angularJs通過攔截器提供了一個(gè)從全局層面進(jìn)行處理的途徑.

 攔截器允許你:

通過實(shí)現(xiàn) request 方法攔截請(qǐng)求: 該方法會(huì)在 $http 發(fā)送請(qǐng)求道后臺(tái)之前執(zhí)行，因此你可以修改配置或做其他的操作。該方法接收請(qǐng)求配置對(duì)象(request configuration object)作為參數(shù)，然后必須返回配置對(duì)象或者 promise 。如果返回?zé)o效的配置對(duì)象或者 promise 則會(huì)被拒絕，導(dǎo)致 $http 調(diào)用失敗。

通過實(shí)現(xiàn) response 方法攔截響應(yīng): 該方法會(huì)在 $http 接收到從后臺(tái)過來的響應(yīng)之后執(zhí)行，因此你可以修改響應(yīng)或做其他操作。該方法接收響應(yīng)對(duì)象(response object)作為參數(shù)，然后必須返回響應(yīng)對(duì)象或者 promise。響應(yīng)對(duì)象包括了請(qǐng)求配置(request configuration)，頭(headers)，狀態(tài)(status)和從后臺(tái)過來的數(shù)據(jù)(data)。如果返回?zé)o效的響應(yīng)對(duì)象或者 promise 會(huì)被拒絕，導(dǎo)致$http 調(diào)用失敗。

通過實(shí)現(xiàn) requestError 方法攔截請(qǐng)求異常: 有時(shí)候一個(gè)請(qǐng)求發(fā)送失敗或者被攔截器拒絕了。請(qǐng)求異常攔截器會(huì)俘獲那些被上一個(gè)請(qǐng)求攔截器中斷的請(qǐng)求。它可以用來恢復(fù)請(qǐng)求或者有時(shí)可以用來撤銷請(qǐng)求之前所做的配置，比如說關(guān)閉進(jìn)度條，激活按鈕和輸入框什么之類的。

通過實(shí)現(xiàn) responseError 方法攔截響應(yīng)異常: 有時(shí)候我們后臺(tái)調(diào)用失敗了。也有可能它被一個(gè)請(qǐng)求攔截器拒絕了，或者被上一個(gè)響應(yīng)攔截器中斷了。在這種情況下，響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺(tái)調(diào)用。

 攔截器的核心是服務(wù)工廠，通過向$httpprovider.interceptors數(shù)組中添加服務(wù)工廠。在$httpProvider中進(jìn)行注冊(cè)。

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

  在服務(wù)中添加一種或多種攔截器：

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()函數(shù)中注冊(cè)攔截器

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

  實(shí)際的例子：（對(duì)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 注入(請(qǐng)求攔截器)

這里有兩種方式來實(shí)現(xiàn)服務(wù)端的認(rèn)證。第一種是傳統(tǒng)的 Cookie-Based 驗(yàn)證。通過服務(wù)端的 cookies 來對(duì)每個(gè)請(qǐng)求的用戶進(jìn)行認(rèn)證。另一種方式是 Token-Based 驗(yàn)證。當(dāng)用戶登錄時(shí)，他會(huì)從后臺(tái)拿到一個(gè) sessionToken。sessionToken 在服務(wù)端標(biāo)識(shí)了每個(gè)用戶，并且會(huì)包含在發(fā)送到服務(wù)端的每個(gè)請(qǐng)求中。

下面的 sessionInjector 為每個(gè)被俘獲的請(qǐng)求添加了 x-session-token 頭 (如果當(dāng)前用戶已登錄):

<!-- 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');
}]);

然后創(chuàng)建一個(gè)請(qǐng)求:

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

被 sessionInjector 攔截之前的配置對(duì)象是這樣的:

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

被 sessionInjector 攔截之后的配置對(duì)象是這樣的:

<!-- 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
  }
}

以上內(nèi)容給大家介紹了AngularJs HTTP響應(yīng)攔截器的相關(guān)知識(shí)，希望本文分享能夠給大家?guī)韼椭?/p>

相關(guān)文章

最新評(píng)論