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

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

WBOY

Libérer： 2016-05-16 15:15:57

original

2122 Les gens l'ont consulté

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

Copier après la connexion

Ensuite, enregistrez l'intercepteur

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Faire une demande :

$http.get('');

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Intercepteur de registre :

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

Copier après la connexion

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

Copier après la connexion

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.