Eine kurze Analyse des HTTP-Antwort-Interceptors_AngularJS von AngularJ

Warum Abfangjäger verwenden?

Wenn wir der Anfrage jederzeit globale Funktionen wie Authentifizierung, Fehlerbehandlung usw. hinzufügen möchten, ist es eine bessere Möglichkeit, die Anfrage abzufangen, bevor sie an den Server gesendet wird oder wenn der Server zurückkehrt.

AngularJs bietet eine Möglichkeit, es auf globaler Ebene durch Interceptoren zu handhaben

Interceptor ermöglicht Ihnen:

Abfangen von Anforderungen durch Implementierung der Anforderungsmethode: Diese Methode wird ausgeführt, bevor $http die Anforderung an den Hintergrund sendet, sodass Sie die Konfiguration ändern oder andere Vorgänge ausführen können. Diese Methode empfängt ein Anforderungskonfigurationsobjekt als Parameter und muss ein Konfigurationsobjekt oder ein Versprechen zurückgeben. Wenn ein ungültiges Konfigurationsobjekt oder Versprechen zurückgegeben wird, wird es abgelehnt, was dazu führt, dass der $http-Aufruf fehlschlägt.

Abfangen der Antwort durch Implementierung der Antwortmethode: Diese Methode wird ausgeführt, nachdem $http die Antwort aus dem Hintergrund empfangen hat, sodass Sie die Antwort ändern oder andere Vorgänge ausführen können. Diese Methode empfängt ein Antwortobjekt als Parameter und muss ein Antwortobjekt oder Versprechen zurückgeben. Das Antwortobjekt umfasst Anforderungskonfiguration, Header, Status und Daten aus dem Hintergrund. Wenn ein ungültiges Antwortobjekt zurückgegeben wird oder das Versprechen abgelehnt wird, schlägt der $http-Aufruf fehl.

Abfangen von Anforderungsausnahmen durch Implementierung der requestError-Methode: Manchmal kann eine Anforderung nicht gesendet werden oder wird vom Interceptor abgelehnt. Der Anforderungsausnahme-Interceptor erfasst Anforderungen, die vom vorherigen Anforderungs-Interceptor unterbrochen wurden. Es kann verwendet werden, um die Anfrage wiederherzustellen oder manchmal, um die vor der Anfrage vorgenommenen Konfigurationen rückgängig zu machen, z. B. das Schließen des Fortschrittsbalkens, das Aktivieren von Schaltflächen und Eingabefeldern usw.

Abfangen von Antwortausnahmen durch Implementierung der Methode „responsError“: Manchmal schlägt unser Hintergrundaufruf fehl. Es ist auch möglich, dass es von einem Anfrage-Interceptor abgelehnt oder von einem vorherigen Antwort-Interceptor unterbrochen wurde. In diesem Fall kann uns der Antwortausnahme-Interceptor dabei helfen, den Hintergrundaufruf fortzusetzen.

Der Kern des Interceptors ist die Service Factory, die dem Array $httpprovider.interceptors hinzugefügt wird. Registrieren Sie sich bei $httpProvider.

AngularJs bietet vier Interceptoren, darunter zwei Erfolgs-Interceptoren (Anfrage, Antwort) und zwei Fehler-Interceptoren (requestError, ResponseError).

Fügen Sie einen oder mehrere Abfangjäger zum Dienst hinzu:

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

Dann verwenden Sie $httpProvider, um den Interceptor in der Funktion .config() zu registrieren

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

Tatsächliches Beispiel: (Abfangen von 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; 
  }  
]); 

Sitzungsinjektion (Anfrage-Interceptor)

Es gibt zwei Möglichkeiten, die serverseitige Authentifizierung zu implementieren. Die erste ist die traditionelle Cookie-basierte Authentifizierung. Der Benutzer wird bei jeder Anfrage durch serverseitige Cookies authentifiziert. Eine andere Möglichkeit ist die tokenbasierte Verifizierung. Wenn sich der Benutzer anmeldet, erhält er im Hintergrund ein SessionToken. Das SessionToken identifiziert jeden Benutzer auf der Serverseite und ist in jeder an den Server gesendeten Anfrage enthalten.

Der folgende sessionInjector fügt den x-session-token-Header zu jeder erfassten Anfrage hinzu (wenn der aktuelle Benutzer angemeldet ist):

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

Dann erstellen Sie eine Anfrage:

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

Das Konfigurationsobjekt vor dem Abfangen durch sessionInjector sieht folgendermaßen aus:

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

Das Konfigurationsobjekt sieht nach dem Abfangen durch sessionInjector wie folgt aus:

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

Der obige Inhalt führt Sie in die relevanten Kenntnisse des HTTP-Antwort-Interceptors von AngularJ ein. Ich hoffe, dass das Teilen dieses Artikels Ihnen helfen kann.