Interceptores en AngularJS

En este tutorial veremos cómo hacer uso de los interceptores de peticiones http en AngularJS para enriquecer o
transformar el contenido del consumo de servicios de backEnd desde el cliente.

0. Índice de contenidos.

• 1. Introducción.
• 2. Entorno.
• 3. Inclusión de cabeceras http.
• 4. Modificación de la URI del servicio.
• 5. Bloquear la invocación a servicios.
• 6. Referencias.
• 7. Conclusiones.

1. Introducción

AngularJS permite interceptar las llamadas http en segundo plano que se realizan con el soporte
del propio framework, permitiendo modificar tanto el contenido de la petición como el de
la respuesta.

En este tutorial veremos como configurar e implementar estos interceptores para probar a incluir una cabecera dentro
de la petición http o modificar la URL de invocación al servicio de backEnd.

Lo interesante es que interceptamos TODAS las peticiones con una única configuración.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil MacBook Pro 15′ (2.3 GHz Intel Core i7, 16GB DDR3).
• Sistema Operativo: Mac OS Mavericks 10.9.4
• AngularJS 1.4.3

3. Inclusión de cabeceras http.

Con este primer caso de uso veremos cómo implementar y configurar un interceptor para añadir una cabecera HTTP a
todas las invocaciones desde el cliente.

var app = angular.module('app', []);

app.config(function($httpProvider)
{
    $httpProvider.interceptors.push('RequestHeadersInterceptor');
});

En la configuración del módulo injectamos el provider del servicio HTTP e incluimos una referencia al
servicio, que crearemos a continuación, dentro de la colección de interceptores.

app.factory("RequestHeadersInterceptor", function()
{
      var request = function request(config)
      {
          config.headers["x-api-key"] = "00998-123-99912";
          return config;
      };

      return {
          request: request
      };
});

Creamos un servicio que debe implementar una función de request que recibe como parámetro un objeto config que nos
permitirá acceder al contenido de la petición para modificarlo.

En este caso de uso añadimos una cabecera a la petición con una clave ficticia de uso de un servicio.

Cualquier petición que se realice con el soporte del servicio HTTP, como el que se muestra a continuación, será interceptado.

app.factory('MessagesDao', function ($q, $http)
{
  function find(){
    var deferred = $q.defer();
  	$http.get('locale/es.js').
      then(function(response) {
        console.log(response.data);
      deferred.resolve(response);
    });
    return deferred.promise;
  }

  return {
    find: function() {
      console.log("find");
      return find();
    }
  };

});

app.controller('IndexController', ['$scope','MessagesDao', function ($scope, MessagesDao) {

  MessagesDao.find().then(function(data) {
    $scope.messages = data;
  });

}]);

4. Modificación de la URI del servicio.

Siguiendo con el ejemplo anterior vamos a comprobar cómo modificar la url de invocación de todos los servicios
de backEnd, sustituyendo un parámetro como puede ser la localización:

app.factory("RequestHeadersInterceptor", function()
{
      var request = function request(config)
      {
          config.url = config.url.replace(':locale', 'es');
          return config;
      };

      return {
          request: request
      };
});

De este modo los servicios tendrán que incluir únicamente un parámetro de sustitución como el que se muestra
a continuación:

app.factory('MessagesDao', function ($q, $http)
{
  function find(){
    var deferred = $q.defer();
  	$http.get('locale/:locale.js').
      then(function(response) {
        console.log(response.data);
      deferred.resolve(response);
    });
    return deferred.promise;
  }

  return {
    find: function() {
      console.log("find");
      return find();
    }
  };

});

5. Bloquear la invocación a servicios

Imaginemos que queremos bloquear las invocaciones a todos los servicios de backEnd, podríamos incluir una condición
como la siguiente.

app.factory("RequestHeadersInterceptor", function($q)
{
      var request = function request(config)
      {
          config.url = config.url.replace(':locale', 'es');

          var canceler = $q.defer();
          config.timeout = canceler.promise;

          if (!true) {
            // Canceling request
            canceler.resolve();
          }
          return config;
      };

      return {
          request: request
      };
});

La propiedad timeout de la configuración HTTP permite indicar:

• un número en milisegundos para cancelar la petición si pasado ese tiempo de timeout no responde, o
• una promesa que abortar la petición cuando se resuelva.

Ahora solo tenemos que inyectar el ámbito o el servicio que nos permite acceder a la condición que indicar si
cancelamos o no todas las peticiones HTTP.

6. Referencias.

• https://docs.angularjs.org/api/ng/service/$http
• http://stackoverflow.com/questions/19711550/angularjs-how-to-prevent-a-request

7. Conclusiones.

Hemos visto una manera simple y poco intrusiva de modificar las peticiones XHR que realizamos con el
soporte del servicio HTTP de AngularJS

De nuevo, aquí el plunker.

Un saludo.

Jose