TypeScript / concatMap

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

Una situacion que no mencionamos hasta ahora es a la hora de emitir los valores no siempre salen en orden. Para evitar esto se utiliza al operador concatMap que solamente se suscribe al siguiente Observable si se completaron los anteriores. Para entenderlo vamos a analizar el sigiente codigo:

import {Observable, of} from 'rxjs';
import {mergeMap, delay} from 'rxjs/operators';

const emisor = of(3, 2, 1);
const emisorDemorado = emisor.pipe(
        mergeMap((valor: number) => {
                console.log(' >> emitido >> \n'
                + new Date().toLocaleTimeString()
                + '\nvalor: ' + valor + ','
                + '\ndemora: ' + (valor * 1000) + ' ms');
                return of(valor).pipe(delay(1000 * valor));
        })
);

emisorDemorado.subscribe(valor => {
        console.log(' << recibido << '
                + new Date().toLocaleTimeString()
                + '\nvalor recibido: ' + valor);
});

Primero importaremos el tipo y la funcion que usaremos desde rxjs. La segunda linea se encargara de importar los operadores que usaremos. El primero sera el que vimos en el post anterior y el segundo sera para generar una demora.

Lo primero que haremos sera definir una constante que sera la encargada de emitir tres valores mediante of. La siguiente constante es para recibir los valores mediante pipe y aqui usaremos a mergeMap. En este caso recibiremos el valor y lo mostraremos en consola. Pero tambien le agregamos un mensaje para indicar que fue enviado e informamos la demora que aplicaremos y por ultimo enviaremos el valor por medio de of y le agregaremos un delay para generar una demora que sera influenciado por el valor que enviemos.

Lo siguiente es aplicar el subscribe a la constante anterior donde mostraremos el valor que envio e indicaremos la hora del momento para poder ver la demora al momento de recibir cada valor. Compilemos y ejecutemos para ver la salida:

En este video podemos ver como «emulamos» una demora a la hora de pasar los datos. Estos pueden ser por distintos motivos pero principalmente sera siempre el mismo: internet. En este caso los valores se enviaron y notificaron, estos fueron de 3 a 1 pero los recibido son de 1 a 3 y con la demora correspondiente. Por lo tanto, el programa fallara porque no recibio los datos con la secuencia correcta. Para solucionarlo modificaremos el codigo de la siguiente manera:

import {Observable, of} from 'rxjs';
import {concatMap, delay} from 'rxjs/operators';

const emisor = of(3, 2, 1);
const emisorDemorado = emisor.pipe(
        concatMap((valor: number) => {
                console.log(' >> emitido >> \n'
                + new Date().toLocaleTimeString()
                + '\nvalor: ' + valor + ','
                + '\ndemora: ' + (valor * 1000) + ' ms');
                return of(valor).pipe(delay(1000 * valor));
        })
);

emisorDemorado.subscribe(valor => {
        console.log(' << recibido << '
                + new Date().toLocaleTimeString()
                + '\nvalor recibido: ' + valor);
});

Primero modificaremos el operador que importamos de mergeMap a concatMap. La siguiente modificacion es similar porque en la constante emisorDemorado cambiamos a mergeMap por concatMap pero el resto del codigo no recibio ninguna modificacion. Compilemos y veamos como es la salida:

Si ven el video, este es muy distinto al anterior porque en lugar de enviar todos los datos y que el suscriptor los reciba, este espera por cada valor con su respectiva demora. Por lo tanto este codigo funcionara correctamente porque ahora si recibira la secuencia correcta de informacion. Esa es la principal diferencia entre mergeMap y concatMap. Cada cual tiene sus pros y contras y debemos ajustar su uso dependiendo de nuestra necesidad.

En resumen, hoy hemos visto a concatMap, que es, para que sirve, como se utiliza, aplicamos un ejemplo para ver un problema y como mediante concatMap lo solucionamos. 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.