Detaillierte Erläuterung des http-Abfangens in AngularJS_AngularJS

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

Dann registrieren Sie den Abfangjäger

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

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

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

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

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

Stellen Sie eine Anfrage:

$http.get('');

Vor dem Abfangen war es ungefähr:

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

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":......
  }
}

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

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

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

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

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

Abfangjäger registrieren:

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

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

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