De Map à switchmap, mergemap, et concatmap - RxJs - Typescript - Angular - Formations informatiques, nouvelles technologies et NTIC | Dev to be curious

  • Home
  • Angular
  • De Map à switchmap, mergemap, et concatmap – RxJs – Typescript – Angular
By: Evan Boissonnot    30 mars 2021  

Nous continuons notre série autour des observables et de RxJs. Après avoir vu le filter et parler des map,  nous allons approfondir nos connaissances avec switchMap, concatMap, mergeMap.

 

Les operators ne sont que des fonctions

Rappelons tout d’abord que les operators, Observable, ne sont que des fonctions orchestrés en mode programmation fonctionnelle, programmation Reactive.

Ainsi lorsqu’on utilise un observable et que l’on applique un operator dans un pipe, on applique une fonction de projection dans une fonction (le pipe).

Travailler avec plusieurs Observable

Maintenant, nous souhaitons travailler avec plusieurs Observables, et orchestrer les appels.
Souvenez-vous les Promise avec le then, qui peut appeler un then, ..
Comme dans cet exemple :

fetch(monurl).then(item => item.json()).then(resultats => console.info(resultats));

Ici, nous notons que nous avons une promise qui retourne un item (la Réponse) qui va être parsée en json, ce parsing renvoyant une promise.

Nous pouvons donc l’écrire ainsi, en Observable :

from(fetch(monurl)).pipe(map(reponse => console.info(reponse));

Ici, en fait, en s’arrêtant là, on est bloqué, on a une réponse, mais on doit la parser en json, donc réutiliser : un from sur la promise du json(). Ca donne :

from(fetch(monurl)).pipe(map(reponse => from(reponse.json()));

Ok Ok, et si on s’inscrit sur ce résultat, ça donne quoi sur la console ?

On aura, …. on aura : bim … une Observable.

Et oui, le map ne permet pas de transformer une observable retourner par une observable.

C’est là qu’interviennent les switchmap, concatmap et mergemap !

Les différences des switchmap, concatmap et mergemap

Concatmap

On utilise ici la source enfant, et on attend le complete pour continuer l’émission du parent.

const secondObservable = new Observable(observer => {
      observer.next(‘2. Hello’);
      observer.next(‘2. Ca va ?’);
      observer.complete();
    });
    this.result$ = firstObservable.pipe(
      concatMap(item => of(‘item’ + item).pipe(delay(500)))
    );

MergeMap

A la différence du concatMap, ici, on ne va pas attendre la fin d’émission de la deuxième observable (celle dans le concatMap), ici c’est une vraie fusion :

L’émission du parent déclenche l’appel de l’émission de l’enfant, puis du second enfant.
Donc on fusionne chaque émission : parent + enfant.

const secondObservable = new Observable(observer => {
      observer.next(‘2. Hello’);
      observer.next(‘2. Ca va ?’);
      observer.complete();
    });
    this.result$ = firstObservable.pipe(
      mergeMap(item => of(‘item’ + item).pipe(delay(500)))
    );

Et enfin le dernier operator : le switchMap.

SwitchMap

Ici, c’est plus particulier, on se désinscrit de l’émission de chaque parent, pour appeler l’émission de chaque enfant.

Ca veut que l’émission parent se fera bien, mais ne sera pas « garder ».

const secondObservable = new Observable(observer => {
      observer.next(‘2. Hello’);
      observer.next(‘2. Ca va ?’);
      observer.complete();
    });
    this.result$ = firstObservable.pipe(
      switchMap(item => of(‘item’ + item).pipe(delay(500)))
    );