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.
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.
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:
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.
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
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.
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.
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.
Muchas son las ventajas de utilizar los Observables en Angular: