Proyecta cada valor emitido por la fuente a un Observable que se fusiona en el Observable resultante
💡 Se debe utilizar mergeMap si se quieren tener varios Observables internos suscritos de forma concurrente
Signatura
Firma
mergeMap<T, R, O extends ObservableInput<any>>(project: (value: T, index: number) => O, resultSelector?: number | ((outerValue: T, innerValue: ObservedValueOf<O>, outerIndex: number, innerIndex: number) => R), concurrent: number = Number.POSITIVE_INFINITY): OperatorFunction<T, ObservedValueOf<O> | R>
Parámetros
Retorna
OperatorFunction<T, ObservedValueOf<O> | R>: Un Observable que emite el resultado de aplicar la función de proyección ( y el ya obsoleto resultSelector opcional) a cada elemento emitido por el Observable fuente y fusionando los resultados de los Observables obtenidos a partir de esta transformación.
Descripción
Proyecta cada valor a un Observable interno, y 'aplasta' cada uno de estos Observables internos mediante el operador mergeAll.
Retorna un Observable que, después de aplicar una función a cada elemento emitido por el Observable fuente, donde dicha función retorna un Observable, fusiona los Observables internos resultantes y emite el resultado de la fusión.
Ejemplos
Como mergeMap se suscribe a los Observables internos de forma concurrente, y se le ha añadido un retardo aleatorio a las peticiones AJAX, se puede observar que // TODO
import { mergeMap, map, tap, delayWhen } from"rxjs/operators";import { interval, of } from"rxjs";import { ajax } from"rxjs/ajax";functiongetRandomNumber() {returnMath.floor(Math.random() *100) +20;}constpokemonId$=of(1,4,7);functiongetPokemonName(id:number) {returnajax.getJSON(`https://pokeapi.co/api/v2/pokemon/${id}`).pipe(map(({ name, id }) => ({ name, id })),// Añadimos un retardo aleatorio a cada petición, para poder observar el efecto de mergeMapdelayWhen((_) =>interval(getRandomNumber() *100)) );}pokemonId$.pipe(tap((number) =>console.log(`Obteniendo Pokémon con id: ${number}`)),mergeMap((number) =>getPokemonName(number)) ).subscribe(console.log);/* Output: Obteniendo Pokémon con id: 1, Obteniendo Pokémon con id: 4, Obteniendo Pokémon con id: 7, { name: "Squirtle", id: 7 }, { name: "Bulbasaur", id: 1 }, { name: "Charmander", id: 4 }*/
Ejemplo de la documentación oficial
Proyectar y 'aplastar' cada letra a un Observable que emite cada segundo
import { of, interval } from"rxjs";import { mergeMap, map } from"rxjs/operators";constletters=of("a","b","c");constresult=letters.pipe(mergeMap((x) =>interval(1000).pipe(map((i) => x + i))));result.subscribe((x) =>console.log(x));// Salida:// a0// b0// c0// a1// b1// c1// continúa listando a,b,c con un el número ascendiente que corresponda