Penjelasan terperinci tentang pemintasan http dalam AngularJS_AngularJS

Pemintasan http iaitu perkhidmatan $http membolehkan kita berinteraksi dengan pelayan Kadangkala kita ingin melakukan sesuatu sebelum membuat permintaan dan selepas menerima respons.
$httpProvider mengandungi pelbagai pemintas.

Kami mencipta pemintas seperti ini.

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

Kemudian daftarkan pemintas

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

Berikut ialah beberapa contoh pemintasan $http.

■ Operasi tak segerak dalam pemintas

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

Di atas ialah pemintasan permintaan, operasi tak segerak dilakukan dan konfigurasi dikemas kini mengikut hasil operasi tak segerak.

Sudah tentu terdapat juga pemintasan tindak balas.

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

■ Pemintasan sesi, minta pemintasan

Pelayan mempunyai dua jenis pengesahan, satu berdasarkan kuki dan satu lagi berdasarkan token. Untuk pengesahan berasaskan token, apabila pengguna log masuk, token daripada pelayan diperoleh, dan token ini dihantar ke pelayan dengan setiap permintaan.

Buat penyuntik yang berkaitan dengan sesi:

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

Ia boleh dilihat bahawa token yang dikembalikan daripada pelayan diletakkan dalam config.headers.

Daftar penyuntik:

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

Buat permintaan:

$http.get('');

Sebelum pemintasan ia adalah kira-kira:

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

Selepas memintas, tambah dua lagi medan token sesi-x dalam pengepala:

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

■ Cap masa, permintaan dan pemintasan tindak balas

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

Di atas, pintas semasa permintaan dan respons, dan tetapkan masa semasa untuk config.requestTimestamp dan config.responseTimestamp.

Daftar pemintas:

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

Kemudian anda boleh mengira masa yang diperlukan untuk permintaan bertindak balas apabila anda menggunakannya.

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

■ Minta pemulihan ralat, minta pemintasan

Simulasikan situasi ralat pemintasan permintaan:

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

Ralat permintaan pemintas:

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

Daftar pemintas:

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

■ Pemulihan ralat sesi, pemintasan tindak balas

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

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.