Los observables en Angular

Angular es uno de los mejores Frameworks para construir aplicaciones web, y como tal, ha sido adoptado en muchos desarrollos compitiendo con otros también ampliamente conocidos como React o Vue.

A la hora de dar soluciones a las llamadas asíncronas en Angular y a los eventos, podemos utilizar el patrón de diseño observable.

¿Qué es un observable?

Básicamente es una fuente de datos. Para utilizar los observables en Angular usamos objetos que importamos de un paquete de terceros llamado RxJS. El observable se implementa de manera que sigue el patrón de diseño de los observables.

Patrón de diseño observable

Inicialmente tenemos un observable y observadores. En medio de ellos tenemos un flujo que representa una línea de tiempo en la que podemos tener múltiples eventos emitidos por el observable.

De esta forma podemos emitir datos si lo activas para hacerlo, de forma programada. Podría estar conectado por ejemplo a un botón cada vez que se hace clic en éste. O como se hace con los servicios HTTP de Angular, donde conectamos a la solicitud de HTTP, de forma que cuando hay respuesta, se emite como un paquete de datos.

En el patrón Observable tenemos el Observable, Observadores y Suscripciones.

Hay tres formas de manejar los paquetes de datos:

  • Manejar los datos
  • Manejar los errores
  • Manejar la finalización del observable.

Es decir, o bien recibimos un paquete de datos, o bien se puede producir un error, o también puede el observable completarse (puede no llegar a hacerlo, por ejemplo: un botón está disponible para hacer clic en cualquier momento, y las veces que queramos).

Así pues, se utiliza para manejar tareas asíncronas, que no sabemos cuándo se lanzan, o cuanto tiempo tardarán en ejecutarse.

Hay un concepto al que quiero referirme y es lo que se llama la programación reactiva en la que se usan los flujos/paquetes de datos asíncronos.

Si tú ejecutas tu código, puedes usar observables si no te interesa saber cuándo terminan determinadas tareas. Un ejemplo sería suscribirse a una petición http y quieres que no se bloquee la ejecución mientras solicitas datos http. Los observables son un enfoque diferente de manejar tareas asíncronas a las promesas. Angular ha optado por usarlos y presenta muchas ventajas.

Instalación

Los observables no están incluidos en la instalación inicial de Angular. No obstante, es realmente fácil disponer de ellos instalando un par de paquetes del repositorio npm:

npm install --save rxjs@6

Además, hay que instalar el paquete rxjs-compat:

npm install --save rxjs-compat

Ejemplo básico

Un ejemplo sencillo lo encontramos en el routing de Angular, donde se pueden usar en el routing:

ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.id = +params.id;
    });

En este caso el observable es params que es la fuente de datos. El dato en cuestión es el id de cada ruta que se emite y que podemos extraer y utilizar al mostrar en la vista.

Suscripción a eventos

Vamos a analizar otro ejemplo muy interesante de cómo nos podemos suscribir a eventos. En este caso es un campo desplegable de un formulario. Al inicializar el componente, nos suscribimos a cualquier cambio en el desplegable. Estamos a la escucha de cualquier cambio. Si el usuario decide seleccionar algún ítem del desplegable, inmediatamente, detecta los cambios en el ítem y asigna al objeto el correspondiente valor, que o bien se visualiza por pantalla o sirve de trigger para hacer una petición http de obtención de datos.

 

Implementación de observables en servicios

En el siguiente ejemplo vamos a utilizar los observables como flujo de datos asíncronos. Es el caso de la llamada a un servicio que nos devuelve datos, por ejemplo, de tipologías.

Como se puede comprobar en el ejemplo de código siguiente, HttpClient devuelve un observable porque es una petición asíncrona, y es la forma en que Angular maneja el asincronismo.

Que sea un observable tiene varias ventajas, como, por ejemplo: puedes modificar la respuesta antes de que alguien se suscriba a ella, o puedes capturar errores de http, etc.

En el servicio TipologyService, implementamos un método getList que devuelve un Observable:

En nuestro componente nos suscribimos al observable de la siguiente forma:

Se realiza de esta forma la llamada asíncrona, o petición http y desacoplamos el renderizado del componente y la gestión de recuperación de los datos del servicio (flujo de datos).

Como comentario adicional cabe destacar que, al utilizar librería rxjs en los observables es posible la utilización de operadores que nos facilitan la manipulación y formateado de datos, dándonos mucha versatilidad en la gestión de datos obtenidos a partir de APIS.

En el caso anterior hemos utilizado dos operadores: Map y Pipe. Es una razón más para utilizarlos. Todos estos operadores son importados de la librería rxjs citada anteriormente y siguen la misma filosofía que los operadores de arrays de javascript.

Conclusiones claves de los Observables, ventajas

Muchas son las ventajas de utilizar los Observables en Angular:

  • Los observables han de estar suscritos para ejecutarse. Esto hace que los Observables sean útiles cuando se requiere una acción.
  • El manejo de errores es responsabilidad de los propios Observables. Cuando los utilizamos, podemos manejar todos los errores en un solo lugar.
  • Gracias a los operadores tenemos mucha flexibilidad en la manipulación de los datos. Se pueden hacer filtros, mapeos, llamadas en paralelo (forkjoin) y llamadas secuenciales.
  • Es posible y necesario usar el método de cancelación de suscripción (unSubscribe), y se puede cancelar observables en cualquier momento. Es realmente importante usar convenientemente el uso de la cancelación de la suscripción para evitar problemas de pérdidas de eficiencia en gestión de memoria. Tengamos en cuenta que estamos usando el procesamiento de datos desde la parte del cliente, concretamente en el explorador.
  • La librería rxjs cuenta con un gran número de desarrolladores que lo han probado y lo están usando actualmente, facilitando mucho la labor de mantenimiento y soporte.

 

 

Tags

He leído y acepto la política de privacidad
Acepto recibir emails sobre actividades de recruiting NTT DATA