Vamos a ver cómo transformar nuestras peticiones en asíncronas para trabajar en un contexto de implementación real.
No es lo mismo probar nuestras aplicaciones de forma individual en nuestro PC mientras desarrollamos que el uso real que van a tener una vez desplegadas en un contexto web, donde pueden tener multitud de peticiones de multitud de clentes diferentes. Nuestra aplicación cliente se bloquearía mientras espera la respuesta del servidor.
Para que nuestra aplicación vaya bien, necesitamos implementar las peticiones asíncronas. Esto lo haremos mediante el uso del API Observable. La idea es que se puedan realizar varias peticiones en el servidor al mismo tiempo, que no estén sincronizadas entre sí y se manejen de forma paralela y en tiempo real. Entonces estamos hablando del concepto reactivo, que funcione en tiempo real, con flujo de datos Stream de Entrada y Salida.
En el siguiente ejemplo tenemos un array de objetos Anuncio en un archivo json.
Hasta aquí todo es síncrono. Veamos como vamos a cambiar este panorama. En anuncio.service.ts realizamos el import de Observable (ojo que cambia según la versión de Angular). En Angular 9 es así (en realidad es así desde Angular 6):
import { Observable } from 'rxjs';Lo que devuelve getAnuncios debe ser un stream, por lo tanto un Observable de Anuncio. Además, también debemos realizar el import del operador of.
Hemos creado un FLUJO (Stream) a partir de los objetos Anuncio. La idea es poder manejar grandes flujos de datos.
¿Qué es Observable?
Realmente no quiero continuar sin que entiendas bien el concerpto de Observable. Se basa en el patrón de diseño Observador. Tenemos un sujeto Observable, en este caso nuetro array de anuncios, y por otro lado tenemos observadores, que están escuchando que haya un cambio en el sujeto. Cuando el sujeto cambia de estado es notificado a los observadores. es decir, cuando tenemos un cambio en el servidor, se notifica automáticamente a los clientes, sin tener que recargar la página. ¡Mola, eh!
Cambios en anuncios.component.ts
Veamos los cambio a realizar en nuestro componente. Veamos cómo era el archivo antes:
Así queda ahora el componente:
Bueno sí, lo sé. Estamos trabajando con un json, los datos son falsos. No estamos trabajando aún con un API REST. Eso lo veremos en los próximos artículos. Estate atento para saber más.
Deja una respuesta