TypeScript / Observables devolviendo Observables

Bienvenidos sean a este post, hoy veremos una particularidad muy importante.

En muchas oportunidades cuando trabajamos con Observables debemos enviar un nuevo stream de este tipo cuando estamos trabajando con uno. Es decir, por cada valor en un stream Observable se crea uno nuevo.

Vamos a suponer que estamos trabajando con una REST API que nos dice que productos fueron vendidos en un catalogo de productos. Este en particular nos devuelve un array de Id de productos que estan asociados al catalogo de productos. Por lo tanto, para cada uno de estos id debemos iniciar un llamado a la REST API para obtener la informacion del producto. Asumiendo que estamos usando un cliente HTTP que devuelve un Obsevable por cada llamada a la API por lo cual podemos decir que el primer stream sera el array con los id de productos, y desde cada id debemos hacer un nuevo stream para buscar los datos del producto, y que a su vez devolveran un Observable. Es decir, debemos lidiar con dos Observable, el primero seran los id de productos y el otro con los datos de cada uno. Para entender este concepto vamos a analizar el siguiente codigo:

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

interface IProductoId {
        id: number;
}
interface IProductoDesc {
        nombre: string;
        desc: string;
}

const listaProductos = <Observable<IProductoId>>from(
        [{ id: 1 }, { id: 2 }, { id: 3 }]);
function getNombre(id: number): Observable<IProductoDesc> {
        return of(
                {
                        id: id,
                        nombre: 'Producto_' + id,
                        desc: 'Descripcion_' + id
                }
        );
}

listaProductos.pipe(
        map((valor: IProductoId) => {
                console.log('Id Producto: ' + valor.id);
                return getNombre(valor.id);
        })
).subscribe((valor: Observable<IProductoDesc>) => {
        valor.subscribe((valor: IProductoDesc) => {
                console.log('nombre producto: ' + valor.nombre);
                console.log('descripcion producto: ' + valor.desc);
        });
});

Primero importaremos el tipo y las funciones que usaremos desde la libreria de rxjs. En la segunda linea importaremos los operadores para manejarlos. Lo siguiente seran definir las interfaces que representan los datos que manejaremos, el primero sera para el id del producto y el segundo para los datos como son el nombre y la descripcion.

Nuestro siguiente paso sera definir una constante que contendra el array con los id de productos, como mencionamos anteriormente, y para ello usaremos al from. Para este caso no solo le diremos que sera de tipo Observable sino que tambien del tipo id del producto, IProductoId, con sus respectivos tres valores.

Despues de esta definiremos una funcion que basicamente se encargara de devolvernos tres datos, como son el id, el nombre y la descripcion. Como argumento recibiremos el id que estamos «buscando», Esta funcion devuelve un tipo Observable y el tipo de descripcion, IProductoDesc, y para ello devolvera un of con los tres datos antes mencionados. Observen que para cada dato al texto descriptivo le agrega el id recibido para que podamos identificarlo.

Con todo definido y creado lo siguiente que haremos sera aplicar un pipe a la constante con la lista de id de productos. En este usaremos un map donde recibira el valor emitido. Este sera del tipo de Id, lo mostraremos en consola y por ultimo devolveremos el resultado de la funcion getNombre y le pasaremos el id que estemos trabajando. Aqui es donde se produce la magia porque mediante el of que devolvimos en esta funcion se genero el nuevo stream. Por esta razon inmediatamennte despues de esto aplicamos un subscribe para tomar el nuevo valor, que sera del tipo Observable y de tipo de descripcion, y a este le aplicaremos un nuevo subscribe pero que solo manejara los tipos de descripcion. Dentro de este mostraremos en consola los campos pertenecientes al nombre y a la descripcion. Con esto comentado si lo compilamos y ejecutamos veremos lo siguiente:

$ node mirar.js
Id Producto: 1
nombre producto: Producto_1
descripcion producto: Descripcion_1
Id Producto: 2
nombre producto: Producto_2
descripcion producto: Descripcion_2
Id Producto: 3
nombre producto: Producto_3
descripcion producto: Descripcion_3
$

Como pueden ver nos trajo todos los datos solicitados y cada uno con su respectivo stream de Observable. Este es un ejemplo basico de una situacion donde un Observable debe devolver otro Observable pero se puede mejorar y lo veremos en los proximos posts.

En resumen, hoy hemos visto el concepto de Observable devolviendo Observables, que es, por que se puede necesitar, un ejemplo practicamente de la vida real y como es el mismo. 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.