Interceptores en AngularJS

1
8173

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

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.

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.

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.


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:

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


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.

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.


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

1 Comentario

  1. Hola,

    Muy interesante los interceptores de las rutas, estoy haciendo un ejemplo simple de autenticacion http con angular1 y cuando envio los datos se muestra la informacion que envio en el navegador, en la pestaña Headers, Form Data. Mi pregunta es, cómo puedo oculatr esta informacion ?

    Saludos
    Gracias

Dejar respuesta

Please enter your comment!
Please enter your name here