Multiples peticiones http con rxjs: ForkJoin

Un escenario común que nos solemos encontrar al realizar cualquier aplicación es la de obtener una serie de datos desde una API y mostrar esa información al usuario.

Obtener múltiples solicitudes asíncronas y gestionarlas puede ser complicado, pero con el servicio Http de Angular y un poco de ayuda de la biblioteca RxJS se puede lograr en sólo unas pocas líneas de código.

Vamos a verlo con un ejemplo.
En nuestro ejemplo vamos a obtener la información de un Pokemon a partir de u Id. Este Id vamos a suponer que lo recibimos como parámetro (en el ejemplo por simplificar realmente no lo recibimos como parámetro sino que le asignamos un Id cualquiera)

En primer lugar crearemos el servicio PokemonService (pokemon.service.ts) que contiene los dos métodos que vamos a utilizar. Uno para obtener la información del pokemon, y la otra para obtener su "pokemon-form"




Lo que haríamos "normalmente" es llamar al método getPokemonInfo, y una vez obtenidos los datos, llamar al método getPokemonForm. Algo parecido a esto:

this.pokemonService.getPokemonInfo(this.pokemonId).subscribe(data => {

this.pokemonService.getPokemonForm(this.pokemonId)

.subscribe(res => console.log(res));

})

Esto por un lado tiene la desventaja de que empezamos a tener estructuras anidadas de Observables, lo cual no es muy legible, y más si en vez de dos solicitudes tenemos tres, cuatro, etc.
Y por otro lado, las dos solicitudes eran secuenciales, luego primero tenemos que realizar una llamada, y únicamente cuando esta llamada se haya realizado satisfactoriamente hacer la segunda llamada, cuando para nuestro ejemplo esto realmente no es necesario.

Aunque habría otras opciones, en este ejemplo vamos a ver como realizar esto mismo con el  operador llamado forkJoin.

Si está familiarizado con Promises esto es muy similar a Promise.all (). El operador forkJoin () nos permite tomar una lista de Observables y ejecutarlos en paralelo. Una vez que cada Observable de la lista devuelve un valor, el forkJoin emite un único valor Observable que contiene una lista de todos los valores resueltos de los Observables de la lista.

Nuestra lista de observables será:

    const pokemonInfo = this.pokemonService.getPokemonInfo(this.pokemonId);
    const pokemonForm = this.pokemonService.getPokemonForm(this.pokemonId);

y para usar el operador forkJoin  hacemos:

Observable.forkJoin([pokemonInfo, pokemonForm])

.subscribe(results => {

this.pokemon.nombre = results[0].name;

this.pokemon.altura = results[0].height;

this.pokemon.peso = results[0].weight;

this.pokemon.imagen = results[1].sprites.front_default;

})

Como se puede observar, el operador forkJoin recibe una lista de Observables (pokemonInfo y pokemonForm) y devuelve los resultados (results[0] y results[1]).
Una vez obtenidos los resultados asignamos las propiedades que deseamos al objeto pokemon.

El código completo de esta parte sería:


Puedes ver el código completo en:
https://stackblitz.com/edit/angular-mynqug