Explication détaillée de l'interception http dans AngularJS_AngularJS

Interception http, c'est-à-dire que le service $http nous permet d'interagir avec le serveur Parfois, nous voulons faire quelque chose avant de faire une demande et après avoir reçu la réponse.
$httpProvider contient un tableau d'intercepteurs.

Nous créons un intercepteur comme celui-ci.

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

Ensuite, enregistrez l'intercepteur

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

Voici quelques exemples d'interception $http.

weight Opérations asynchrones dans les intercepteurs

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

Ce qui précède est une interception de requête, une opération asynchrone est effectuée et la configuration est mise à jour en fonction du résultat de l'opération asynchrone.

Bien sûr, il existe également une interception de réponse.

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

weight Interception de session, demande d'interception

Le serveur dispose de deux types de vérification, l'une est basée sur des cookies et l'autre est basée sur des jetons. Pour l'authentification basée sur un jeton, lorsque l'utilisateur se connecte, un jeton du serveur est obtenu et ce jeton est envoyé au serveur à chaque requête.

Créer un injecteur lié à la séance :

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

On peut voir que le jeton renvoyé par le serveur est placé dans config.headers.

Enregistrer l'injecteur :

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

Faire une demande :

$http.get('');

Avant l'interception c'était à peu près :

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

Après l'interception, ajoutez deux autres champs x-session-token dans les en-têtes :

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

■ Interception d'horodatage, de demande et de réponse

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

Ci-dessus, interceptez pendant la demande et la réponse, et attribuez l'heure actuelle à config.requestTimestamp et config.responseTimestamp.

Intercepteur de registre :

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

Ensuite, vous pouvez calculer le temps nécessaire à la demande pour répondre lorsque vous l'utilisez.

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

weight Demander une récupération d'erreur, demander une interception

Simuler une situation d'erreur d'interception de requête :

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

Erreur de demande d'interception :

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

Intercepteur de registre :

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

■ Récupération d'erreur de session, interception de réponse

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.