Penjelasan terperinci tentang pemintasan http dalam AngularJS

Penjelasan terperinci tentang pemintasan http dalam AngularJS_AngularJS

WBOY

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

asal

2127 orang telah melayarinya

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

Salin selepas log masuk

Kemudian daftarkan pemintas

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Daftar penyuntik:

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

Salin selepas log masuk

Buat permintaan:

$http.get('');

Salin selepas log masuk

Sebelum pemintasan ia adalah kira-kira:

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Daftar pemintas:

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

Salin selepas log masuk

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

Salin selepas log masuk

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