Analisis ringkas tentang pemintas tindak balas HTTP AngularJs_AngularJS

Mengapa menggunakan pemintas?

Pada bila-bila masa, jika kami ingin menambah kefungsian global pada permintaan, seperti pengesahan, pengendalian ralat, dll., ini adalah cara yang lebih baik untuk memintas permintaan sebelum ia dihantar ke pelayan atau apabila pelayan kembali.

angularJs menyediakan cara untuk mengendalikannya di peringkat global melalui pemintas

Pemintas membenarkan anda untuk:

Permintaan memintas dengan melaksanakan kaedah permintaan: Kaedah ini akan dilaksanakan sebelum $http menghantar permintaan ke latar belakang, jadi anda boleh mengubah suai konfigurasi atau melakukan operasi lain. Kaedah ini menerima objek konfigurasi permintaan sebagai parameter dan mesti mengembalikan objek konfigurasi atau janji. Jika objek konfigurasi yang tidak sah atau janji dikembalikan, ia akan ditolak, menyebabkan panggilan $http gagal.

Memintas respons dengan melaksanakan kaedah respons: Kaedah ini akan dilaksanakan selepas $http menerima respons daripada latar belakang, jadi anda boleh mengubah suai respons atau melakukan operasi lain. Kaedah ini menerima objek tindak balas sebagai parameter dan mesti mengembalikan objek respons atau janji. Objek tindak balas termasuk konfigurasi permintaan, pengepala, status dan data dari latar belakang. Jika objek respons tidak sah dikembalikan atau janji akan ditolak, panggilan $http akan gagal.

Memintas pengecualian permintaan dengan melaksanakan kaedah requestError: Kadangkala permintaan gagal dihantar atau ditolak oleh pemintas. Pemintas pengecualian permintaan menangkap permintaan yang diganggu oleh pemintas permintaan sebelumnya. Ia boleh digunakan untuk memulihkan permintaan atau kadangkala untuk membuat asal konfigurasi yang dibuat sebelum permintaan, seperti menutup bar kemajuan, mengaktifkan butang dan kotak input, dsb.

Memintas pengecualian respons dengan melaksanakan kaedah responseError: Kadangkala panggilan latar belakang kami gagal. Terdapat juga kemungkinan bahawa ia telah ditolak oleh pemintas permintaan, atau diganggu oleh pemintas respons sebelumnya. Dalam kes ini, pemintas pengecualian respons boleh membantu kami menyambung semula panggilan latar belakang.

Teras pemintas ialah kilang servis, yang ditambahkan pada tatasusunan $httpprovider.interceptors. Daftar dalam $httpProvider.

AngularJs menyediakan empat pemintas, termasuk dua pemintas kejayaan (permintaan, tindak balas) dan dua pemintas kegagalan (requestError, responseError).

Tambah satu atau lebih pemintas pada perkhidmatan:

angular.module("myApp", []) 
  .factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        ...... 
        return $q.reject(response); 
      }, 
      'response' : function(response) { 
        ...... 
        return response; 
      }, 
      'request' : function(config) { 
        ...... 
        return config; 
      }, 
      'requestError' : function(config){ 
        ...... 
        return $q.reject(config); 
      } 
    } 
  return httpInterceptor; 
} 

Kemudian gunakan $httpProvider untuk mendaftarkan pemintas dalam fungsi .config()

angular.module("myApp", []) 
.config([ '$httpProvider', function($httpProvider) { 
  $httpProvider.interceptors.push('httpInterceptor'); 
} ]); 

Contoh sebenar: (Pemintasan 401, 404)

routerApp.config([ '$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('httpInterceptor'); 
  } ]); 
  routerApp.factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        if (response.status == 401) { 
          var rootScope = $injector.get('$rootScope'); 
          var state = $injector.get('$rootScope').$state.current.name; 
          rootScope.stateBeforLogin = state; 
          rootScope.$state.go("login"); 
          return $q.reject(response); 
        } else if (response.status === 404) { 
          alert("404!"); 
          return $q.reject(response); 
        } 
      }, 
      'response' : function(response) { 
        return response; 
      } 
    } 
    return httpInterceptor; 
  }  
]); 

Suntikan sesi (pemintas permintaan)

Terdapat dua cara untuk melaksanakan pengesahan bahagian pelayan. Yang pertama ialah pengesahan Berasaskan Kuki tradisional. Pengguna disahkan untuk setiap permintaan melalui kuki sebelah pelayan. Cara lain ialah pengesahan Berasaskan Token. Apabila pengguna log masuk, dia akan mendapat sessionToken dari latar belakang. SessionToken mengenal pasti setiap pengguna di bahagian pelayan dan disertakan dalam setiap permintaan yang dihantar ke pelayan.

SessionInjector berikut menambah pengepala x-session-token pada setiap permintaan yang ditangkap (jika pengguna semasa log masuk):

<!-- lang: js -->
module.factory('sessionInjector', ['SessionService', function(SessionService) {
  var sessionInjector = {
    request: function(config) {
      if (!SessionService.isAnonymus) {
        config.headers['x-session-token'] = SessionService.token;
      }
      return config;
    }
  };
  return sessionInjector;
}]);
module.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('sessionInjector');
}]);

Kemudian buat permintaan:

<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos');

Objek konfigurasi sebelum dipintas oleh sessionInjector adalah seperti ini:

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*"
  }
}

Objek konfigurasi selepas dipintas oleh sessionInjector adalah seperti ini:

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*",
    "x-session-token": 415954427904
  }
}

Kandungan di atas memperkenalkan anda kepada pengetahuan yang berkaitan tentang pemintas respons HTTP AngularJs Saya harap perkongsian artikel ini dapat membantu anda.