TypeScript / forkJoin

Bienvenidos sean a este post, hoy veremos otro operador de observables.

En el post anterior vimos un operador que procesaba cada valor cuando este llegaba sin importar su demora pero que sucede cuando necesitamos que un numero de streams observables se completen antes de hacer algo? Aqui entra en accion el operador del titulo. Esta situacion es mas habitual de lo que creen, por ejemplo al momento de cargar una pagina se hacen varias solicitudes REST y se debe esperar varias respuestas de distintas API para poder mostrar la pagina.

Vamos a suponer que tenemos una pagina que debe mostrar productos de un catalogo. En este caso por un lado debemos mostrar el catalogo actualizado y por otro lado las ofertas del dia, en cada caso con su respectiva solicitud REST. En el cuerpo principal mostraremos los productos y en otra parte de la pagina los ofertas. A su vez necesitaremos otra solicitud REST para cargar informacion (saber si esta logueado, region o pais, etc) y una vez que toda la informacion este completa recien proceder a cargar la pagina. Como pueden ver, la situacion comentada al inicio es completamente normal en nuestro dia a dia en una pagina cualquiera.

Para ilustrar un caso similar a lo comentado anteriormente vamos a analizar el siguiente codigo:

import {Observable, interval, forkJoin} from 'rxjs';
import {map, toArray, take} from 'rxjs/operators';

const unoXsegundo = interval(1000);
const numeros: Observable<number[]> = unoXsegundo.pipe(
        take(3),
        map((valor: number) => {
                console.log('>> numeros emitiendo; ' + valor);
                return valor;
        }),
        toArray()
);
const cadenas: Observable<string[]> = unoXsegundo.pipe(
        take(2),
        map((valor: number) => {
                console.log('>> cadenas emitiendo: ' + valor);
                return 'cdn_' + valor;
        }),
        toArray()
);

forkJoin([numeros, cadenas]).subscribe((valores) => {
        console.log('<< numeros devolvio: ' + valores[0]);
        console.log('<< cadenas devolvio: ' + valores[1]);
});

Primero importaremos el tipo y las funciones de rxjs que usaremos. La segunda es para importar los operadores observables que utilizaremos. La primera funcion que usaremos sera interval para generar un intervalo de 1 seg. (1000ms) y almacenarlo en una constante. Luego tendremos dos constantes similares pero manejan dos tipos distintos. En el primer caso, el tipo Observable tendra un array de tipo number, primero aplicaremos el pipe a la constante anterior para generar el intervalo. Lo siguiente es usar un take para que pase tres valores, y cada uno de los valores «tomados» y pasados seran tomados por un map. Este mostrara en consola el valor recibido y luego lo devolvera para finalmente mediante toArray tomar todos los valores procesados, combinarlos en un solo valor Observable y devolverlo.

La otra constante es exactamente lo mismo pero en lugar de generar un array de number genera uno de tipo string y en lugar de «tomar» tres valores toma dos. Con esto tenemos dos constantes que devuelven un array de distintos tipos. Lo ultimo es aplicar a forkJoin donde pasaremos las constantes anteriores. y aplicaremos un subscribe para recibir los valores de cada uno y mostraremos en consola. Compilemos y veamos como es su salida:

Como vemos la salida demora 1 seg.. en cada emision de cada dato y solo una vez que llegaron cada uno de los valores procedio a mostrar los valores recibidos en forkJoin. A pesar de que no tienen la misma cantidad de valores. Pero podemos manejar la informacion a mostrar de otra manera, tomemos a forkJoin y modifiquemoslo de la siguiente manera:

forkJoin([numeros, cadenas]).subscribe(
        ([salida_num, salida_cdn]) => {
        console.log('<< numeros devolvio: ' + salida_num);
        console.log('<< cadenas devolvio: ' + salida_cdn);
});

En este caso en lugar de usar una sola variable como array le pasamos un array con dos variables para almancenar los valores recibidos con forkJoin. Observen que ahora al momento de mostrarlo le pasamos las nuevas variables y nos deja una mejor identificacion de que es cada dato.

En resumen, hoy hemos visto forkJoin, que es, para que sirve, como se utiliza, un ejemplo practico para ver como trabaja. Espero les haya sido 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.