AngularJS
Interceptor HTTP
Buscar..
Introducción
El servicio $ http de AngularJS nos permite comunicarnos con un backend y realizar solicitudes HTTP. Hay casos en los que queremos capturar cada solicitud y manipularla antes de enviarla al servidor. Otras veces nos gustaría capturar la respuesta y procesarla antes de completar la llamada. El manejo global de errores de http puede ser también un buen ejemplo de tal necesidad. Los interceptores son creados exactamente para tales casos.
Empezando
El servicio $http integrado de Angular nos permite enviar solicitudes HTTP. Con frecuencia, surge la necesidad de hacer cosas antes o después de una solicitud, por ejemplo, agregar a cada solicitud un token de autenticación o crear una lógica genérica de manejo de errores.
Generador interactivo de HTTP paso a paso
Crea un archivo HTML con el siguiente contenido:
<!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>
Agrega un archivo JavaScript llamado 'app.js':
var interceptorApp = angular.module('interceptorApp', []);
interceptorApp.config(function($httpProvider) {
$httpProvider.interceptors.push('genericInterceptor');
});
Agregue otro llamado '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]);
})();
Y finalmente el archivo que contiene el interceptor '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);
})();
El 'genéricoInterceptor' cubre las posibles funciones que podemos anular agregando un comportamiento adicional a nuestra aplicación.
Mensaje flash en respuesta utilizando el interceptor http
En el archivo de vista
En el html base (index.html) donde usualmente incluimos los scripts angulares o el html que se comparte en la aplicación, dejamos un elemento div vacío, los mensajes flash aparecerán dentro de este elemento div
<div class="flashmessage" ng-if="isVisible">
{{flashMessage}}
</div>
Archivo de comandos
En el método de configuración del módulo angular, inyecte el httpProvider, el httpProvider tiene una propiedad de matriz de interceptor, presione el interceptor personalizado. En el ejemplo actual, el interceptor personalizado solo intercepta la respuesta y llama a un método asociado 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;
}
};
}]);
}])
Dado que solo los proveedores pueden ser inyectados en el método de configuración de un módulo angular (es decir, httpProvider y no en el de rootscope), declare el método conectado al rootscope dentro del método de ejecución del módulo angular.
También muestre el mensaje dentro de $ timeout para que el mensaje tenga la propiedad flash, que está desapareciendo después de un tiempo límite. En nuestro ejemplo sus 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)
}
}]);
Errores comunes
Al intentar inyectar $ rootScope o cualquier otro servicio dentro del método de configuración del módulo angular, el ciclo de vida de la aplicación angular no permite eso y se generará un error de proveedor desconocido. Solo los proveedores pueden ser inyectados en el método de configuración del módulo angular.
