Detaillierte Erläuterung des http-Abfangens in AngularJS

Detaillierte Erläuterung des http-Abfangens in AngularJS_AngularJS

WBOY

Freigeben： 2016-05-16 15:15:57

Original

2121 Leute haben es durchsucht

http-Abfangen, das heißt, der $http-Dienst ermöglicht es uns, mit dem Server zu interagieren. Manchmal möchten wir etwas tun, bevor wir eine Anfrage stellen und nachdem wir die Antwort erhalten haben.
$httpProvider enthält ein Array von Interceptoren.

Wir erstellen einen Abfangjäger wie diesen.

app.factory('myInterceptor', ['$log', function($log){
  $log.debug('');
  
  var myInterceptor = {};
  
  return myInterceptor;
}])

Nach dem Login kopieren

Dann registrieren Sie den Abfangjäger

app.config(['$httpProvider', function($httpProvider){
  $httpProvider.interceptors.push('myInterceptor');
}])

Nach dem Login kopieren

Im Folgenden finden Sie einige Beispiele für das Abfangen von $http.

■ Asynchrone Operationen in Interceptoren

app.factory('myInterceotpr','someAsyncServcie', function($q, someAsyncServcie){
  var requestInterceptor = {
    request: function(config){
      var deferred = %q.defer();
      someAsyncService.doAsyncOperation().then(function(){
        ...
        deferred.resolve(config);
      }, function(){
        ...
        deferred.resolve(config);
      })
      return deferred.promise;
    }
  };
  
  return requestInterceptor;
})

Nach dem Login kopieren

Das Obige ist ein Anforderungsabfangen, ein asynchroner Vorgang wird ausgeführt und die Konfiguration wird entsprechend dem Ergebnis des asynchronen Vorgangs aktualisiert.

Natürlich gibt es auch das Abfangen von Antworten.

app.factory('myInterceptor',['$q', 'someAsyncService', function($q, someAsyncSercice){
  var responseInterceptor = {
    response: function(response){
      var deferred = $q.defer();
      someAsyncService.doAsyncOperation().then(function(response){
        ...
        deferred.resolve(response);
      }, function(response){
        ...
        deferred.resolve(response);
      })
      return deferred.promise;
    }
  };
  return responseInterceptor;
}])

Nach dem Login kopieren

■ Sitzungsabfang, Anforderungsabfang

Der Server verfügt über zwei Arten der Verifizierung: eine basiert auf Cookies und die andere auf Token. Bei der tokenbasierten Authentifizierung erhält der Benutzer beim Anmelden ein Token vom Server und dieses Token wird bei jeder Anfrage an den Server gesendet.

Erstellen Sie einen Injektor für die Sitzung:

app.factory('sessionInjector',['SessionService', function(SessionService){
  var sessionInjector = {
    request: function(config){
      if(!SessionService.isAnonymous){
        config.headers['x-session-token'] = SessionService.token;
      }
      return config;
    }
  };
  
  return sessionInjector;
}])

Nach dem Login kopieren

Es ist ersichtlich, dass das vom Server zurückgegebene Token in config.headers platziert wird.

Injektor registrieren:

app.config(['$httpProvider', function($httpProvider){
  $httpProvider.interceptors.push('sessionInjector');
}])

Nach dem Login kopieren

Stellen Sie eine Anfrage:

$http.get('');

Nach dem Login kopieren

Vor dem Abfangen war es ungefähr:

{
  "transformRequest":[null],
  "transformResponse":[null],
  "method":"GET",
  "url":"",
  "headers":{
    "Accept": "application/json, text/plain,*/*"
  }
}

Nach dem Login kopieren

Fügen Sie nach dem Abfangen zwei weitere x-session-token-Felder in den Headern hinzu:

{
  "transformRequest":[null],
  "transformResponse":[null],
  "method":"GET",
  "url":"",
  "headers":{
    "Accept": "application/json, text/plain,*/*",
    "x-session-token":......
  }
}

Nach dem Login kopieren

■ Zeitstempel, Abfangen von Anfragen und Antworten

app.factory('timestampMarker',[function(){
  var timestampMarker = {
    request:function(config){
      config.requestTimestamp = new Date().getTime();
      return config;
    },
    response: function(response){
      response.config.responseTimestamp = new Date().getTime();
      return config;
    }
  };
  
  return timestampMarker;
}])

Nach dem Login kopieren

Oben: Während der Anfrage und Antwort abfangen und die aktuelle Zeit config.requestTimestamp und config.responseTimestamp zuweisen.

Abfangjäger registrieren:

app.config(['$httpProvider', function($httpProvider){
  $httpProvider.interceptors.push('timestampMarker');
}])

Nach dem Login kopieren

Dann können Sie berechnen, wie lange es dauert, bis die Anfrage antwortet, wenn Sie sie verwenden.

$http.get('').then(function(response){
  var time = response.config.responseTime - response.config.requestTimestamp;
  console.log('请求耗去的时间为 ' + time);
})

Nach dem Login kopieren

■ Fehlerbeseitigung anfordern, Abfangen anfordern

Simulieren Sie eine Fehlersituation beim Abfangen von Anforderungen:

app.factory('requestRejector',['$q', function($q){
  var requestRejector = {
    request: function(config){
      return $q.reject('requestRejector');
    }
  };
  return requestRejector;
}])

Nach dem Login kopieren

Fehler bei der Abfanganforderung:

app.factory('requestRecoverer',['$q', function($q){
  var requestRecoverer = {
    requestError: function(rejectReason){
      if(rejectReason === 'requestRejector'){
        //恢复请求
        return {
          transformRequest:[],
          transformResponse:[],
          method:'GET',
          url:'',
          headers:{
            Accept:'application/json, text/plain, */*'
          }
        };
      } else {
        return $q.reject(rejectReason);
      }
    }
  };
  
  return requestRecoverer;
}])

Nach dem Login kopieren

Abfangjäger registrieren:

app.config(['$httpProvider', function($httpProvider){
  $httpProvider.interceptors.push('requestRejector');
  $httpProvider.interceptors.push('requestRecoverer');
}])

Nach dem Login kopieren

■ Wiederherstellung von Sitzungsfehlern, Abfangen von Antworten

app.factory('sessionRecoverer',['$q','$injector',function($q, $injector){
 var sessionRecoverer = {
  responseError: function(response){
   //如果Session过期
   if(response.status == 419){
    var SessionService = $injector.get('SessionService');
    var $http = $injector.get('$http');
    var deferred = $q.defer();
    
    //创建一个新的session
    SessionService.login().then(deferred.resolve, deferred.reject);
    
    return deferred.promise.then(function(){
     reutrn $http(response.config);
    })
   }
   return $q.reject(response);
  }
 };
 
 return sessionRecoverer;
}])

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.