Hola a todos, en el post anterior, vimos como es posible consumir un servicio REST utilizando ngResource, así que en esta ocasión se va a complementar dicho ejemplo añadiendo un interceptor que va a actuar cuando se produzca un error en cualquiera de las peticiones que se van realizando, bueno, realmente es posible crearlo para manejar cualquier código HTTP.

Un interceptor permite interceptar:

  • request
  • request error
  • response
  • response error

Para este caso, se va a crear un interceptor para los response con código de respuesta 404.


Crear un interceptor en AngularJS es bastante sencillo, y se debe configurar en el módulo de la aplicación, generalmente, un módulo se define de la siguiente forma:


(function () {
    'use strict';
    var app = angular.module('app', ['ngResource']);
})();

Ahora, sobre dicho módulo, se va a utilizar el servicio $httpProvider para crear el interceptor, para añadirlo se debe hacer uso de $httpProvider.interceptors.push, en la función del interceptor se hará uso del $q que permite ejecutar funciones asíncronas (espero luego hacer un post al respecto) y finalmente se debe revisar el código HTTP de respuesta, en resumen, el interceptor para el código HTTP 404 (Not Found) sería:


(function () {
    'use strict';
    var app = angular.module('app', ['ngResource']);

    app.config(function ($httpProvider) {
        $httpProvider.interceptors.push(['$q', function ($q) {
            return {
                'responseError': function (response) {
                    if (response.status === 404)
                        alert('Elemento no encontrado');
                    return $q.reject(response);
                }
            };
        }]);
    })
})();

Y listo, eso es todo, como se puede ver es bastante fácil crear un interceptor para tener un control global de excepciones o de algunos códigos HTTP específicos.

Espero el post les sea interesante y no te olvides de compartirlo, saludos!