AngularJS
Interceptor HTTP
Ricerca…
introduzione
Il servizio $ http di AngularJS ci consente di comunicare con un back-end e fare richieste HTTP. Ci sono casi in cui vogliamo catturare ogni richiesta e manipolarla prima di inviarla al server. Altre volte vorremmo acquisire la risposta e elaborarla prima di completare la chiamata. La gestione globale degli errori HTTP può essere anche un buon esempio di tale necessità. Gli intercettori sono creati esattamente per questi casi.
Iniziare
Il servizio $http integrato di Angular ci consente di inviare richieste HTTP. Oftentime, la necessità di fare cose prima o dopo una richiesta, ad esempio aggiungendo a ciascuna richiesta un token di autenticazione o creando una logica di gestione degli errori generica.
HttpInterceptor generico passo dopo passo
Crea un file HTML con il seguente contenuto:
<!DOCTYPE html>
<html>
<head>
<title>Angular Interceptor Sample</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="appController.js"></script>
<script src="genericInterceptor.js"></script>
</head>
<body ng-app="interceptorApp">
<div ng-controller="appController as vm">
<button ng-click="vm.sendRequest()">Send a request</button>
</div>
</body>
</html>
Aggiungi un file JavaScript chiamato 'app.js':
var interceptorApp = angular.module('interceptorApp', []);
interceptorApp.config(function($httpProvider) {
$httpProvider.interceptors.push('genericInterceptor');
});
Aggiungi un altro chiamato "appController.js":
(function() {
'use strict';
function appController($http) {
var vm = this;
vm.sendRequest = function(){
$http.get('http://google.com').then(function(response){
console.log(response);
});
};
}
angular.module('interceptorApp').controller('appController',['$http', appController]);
})();
E infine il file contenente l'intercettore stesso 'genericInterceptor.js':
(function() {
"use strict";
function genericInterceptor($q) {
this.responseError = function (response) {
return $q.reject(response);
};
this.requestError = function(request){
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
};
this.response = function(response){
return response;
};
this.request = function(config){
return config;
}
}
angular.module('interceptorApp').service('genericInterceptor', genericInterceptor);
})();
Il 'genericInterceptor' copre le possibili funzioni che possiamo sovrascrivere aggiungendo un comportamento extra alla nostra applicazione.
Messaggio flash sulla risposta utilizzando l'intercettore http
Nel file di visualizzazione
Nel file html di base (index.html) in cui di solito includiamo gli script angolari o l'html condiviso nell'app, lasciamo un elemento div vuoto, i messaggi flash verranno visualizzati all'interno di questo elemento div
<div class="flashmessage" ng-if="isVisible">
{{flashMessage}}
</div>
File di script
Nel metodo di configurazione del modulo angolare, iniettare httpProvider, httpProvider ha una proprietà di matrice dell'intercettore, premere l'intercettore personalizzato. Nell'esempio corrente l'intercettore personalizzato intercetta solo la risposta e chiama un metodo collegato a rootScope.
var interceptorTest = angular.module('interceptorTest', []);
interceptorTest.config(['$httpProvider',function ($httpProvider) {
$httpProvider.interceptors.push(["$rootScope",function ($rootScope) {
return { //intercept only the response
'response': function (response)
{
$rootScope.showFeedBack(response.status,response.data.message);
return response;
}
};
}]);
}])
Poiché solo i provider possono essere iniettati nel metodo di configurazione di un modulo angolare (ovvero httpProvider e non il rootscope), dichiarare il metodo collegato a rootscope all'interno del metodo run del modulo angolare.
Visualizza anche il messaggio all'interno di $ timeout in modo che il messaggio abbia la proprietà flash, che scompare dopo un tempo limite. Nel nostro esempio i suoi 3000 ms.
interceptorTest.run(["$rootScope","$timeout",function($rootScope,$timeout){
$rootScope.showFeedBack = function(status,message){
$rootScope.isVisible = true;
$rootScope.flashMessage = message;
$timeout(function(){$rootScope.isVisible = false },3000)
}
}]);
Insidie comuni
Cercando di iniettare $ rootScope o altri servizi all'interno del metodo di configurazione del modulo angolare, il ciclo di vita di un'app angolare non consente di generare quell'errore di provider sconosciuto. Solo i fornitori possono essere iniettati nel metodo di configurazione del modulo angolare