Différence entre mergeMap, switchMap, concatMap et exhaustMap

Bonjour, lors de votre entretien en tant que développeur Angular, plusieurs questions pourraient vous être posées sur les opérateurs RxJs et leurs différences.

L'une des questions les plus courantes est "Quelle est la différence entre mergeMap vs switchMap vs concatMap vs exhaustMap ?"

Allons-y et expliquons-les en termes simples.

Je vais expliquer la différence de comportement à l'aide d'un exemple simple :

import { interval, take, tap, from } from 'rxjs';
import {
  switchMap,
  mergeMap,
  concatMap,
  exhaustMap,
} from 'rxjs/operators';

const mapOperators = [
  mergeMap,
  switchMap,
  concatMap,
  exhaustMap
];

const selectedMap = mapOperators[0]; // <- Change operator index here

const clicks$ = from(['First Click', 'Second Click', 'Third Click']).pipe(
  tap(console.log),
);

clicks$
  .pipe(
    selectedMap((click: number) =>
      interval(500).pipe(
        tap((intervalValue: number) =>
          console.log(
            `${click} Value: ${intervalValue}`
          )
        ),
        take(3)
      )
    )
  )
  .subscribe();

Dans l'exemple de code, que vous pouvez expérimenter sur Stackblitz, vous pouvez voir l'imitation de 3 clics utilisateur

Maintenant, voyons ce que chacun des opérateurs reviendra

Fusionner la carte

First Click
Second Click
Third Click
First Click Value: 0
Second Click Value: 0
Third Click Value: 0
First Click Value: 1
Second Click Value: 1
Third Click Value: 1
First Click Value: 2
Second Click Value: 2
Third Click Value: 2

L'opérateur mergeMap exécute les émissions en parallèle, c'est pourquoi vous voyez

First Click Value: 0
Second Click Value: 0
Third Click Value: 0

avec la valeur 0

SwitchMap

First Click
Second Click
Third Click
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

L'opérateur switchMap annulera le précédent après chaque nouveau clic, dans notre cas le Premier clic sera annulé par le Deuxième clic et le Deuxième clic sera annulé par le Troisième clic et comme résultat nous verrons les Valeurs du troisième clic

Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

ConcatMap

First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

L'opérateur concatMap mémorisera tous les clics et les consolera.les enregistrera dans le même ordre, dans notre cas Premier clic, Deuxième clic, Troisième clic comme tu vois dans la console

First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

Carte d'échappement

First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2

L'opérateur exhaustMap bloquera le flux jusqu'à ce que le Premier clic soit terminé et dans notre cas, le Deuxième clic et le Troisième clic seront ignorés

First Click Value: 0
First Click Value: 1
First Click Value: 2

Maintenant que vous comprenez les différences entre ces opérateurs, vous pouvez imaginer les conséquences d'un mauvais choix

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!