TypeScript / Observable basados en tiempo

Bienvenidos sean a este post, hoy veremos una particularidad mas de los Observables.

Esta particularidad es muy especial porque es su principal caracteristica. Esta es la perfecta posibilidad de poder trabajar con eventos asincronicos. Es decir, si te suscribes a un Observable y este lo envia despues de una X cantidad de tiempo, igualmente recibiras la notificacion cuando este sea realizado. Esta habilidad es muy util y a su vez muy utilizada en algunas librerias para realizar solicitudes en una API. Esto es trabajado asi porque al estar sobre internet no sabemos cuanto puede tardar en responder el servidor, por lo tanto podemos crear un Observable en una solicitud REST y luego simplemente suscribirnos. Para entender este concepto vamos a analizar el siguiente codigo:

import {Observable, interval} from 'rxjs';
import {map, take} from 'rxjs/operators';
const intervalo = interval(1000);
const numeros = intervalo.pipe(
        take(5),
        map((valor: number) => {
                console.log('map recibio: ' + valor);
                return 'cdn_' + (valor * 2);
        })
);
numeros.subscribe((valor: string) => {
        console.log(new Date().toLocaleTimeString() + " " + valor);
});

Las dos primeras lineas son para importar las funciones y tipo que usaremos. En la primer linea importaremos el tipo Observable y la funcion interval, esta la usaremos para generar el intervalo, y la segunda linea la usaremos para importar las funciones del modulo operators de la libreria. La primera sera el map que estuvimos utilizando en posts anteriores y la segunda la veremos en accion en unos segundos.

Nuestro primer paso sera crear una constante que almacenara el resultado de interval, en este caso genera un intervalo de 1 segundo (1000ms). La siguiente constante sera para almacenar el resultado de aplicar la funcion pipe a la constante anterior. En esta aplicaremos varios operadores observables, el primero sera el uso de take. Como mencionamos al comienzo la funcion take es importado desde la libreria rxjs, y esta lo unico que hace es tomar un numero en base a la cantidad que le pasamos como argumento. En este caso, contara de 0 a 4 porque es la cantidad que pasamos como argumento. El siguiente operador es un map, este tomara un valor devuelto por take y lo mostrara en consola y a su vez devuelve una cadena con el valor recibido multiplicado por 2.

Por ultimo aplicamos un subscribe a la constante anterior donde tomaremos el valor recibido y mostraremos primero la hora del momento, mediante new Date y la funcion, y luego le concatenaemos el valor recibido. Compilamos y veamos como trabaja mediante el siguiente video

En el video tenemos dos curiosidades, la primera es el intervalo de un segundo que generamos con interval. La segunda es como toma el valor mediante take pero con el retardo anterior y a su vez como en todo momento se toma la informacion sin perder ningun valor. Como dijimos al comienzo al no tener una forma segura de cuando llegara la informacion esta forma de trabajar nos asegura que la informacion siempre sera recibida.

En resumen, hoy hemos visto que es un observable basado en tiempo, que es, para que sirve, como se utiliza y un ejemplo simple y practico para verlo en accion. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.