Unterschied zwischen mergeMap vs. switchMap vs. concatMap vs. ExhaustMap

Hallo, in Ihrem Vorstellungsgespräch als Angular-Entwickler werden Ihnen möglicherweise mehrere Fragen zu RxJs-Operatoren und ihren Unterschieden gestellt.

Eine der häufigsten Fragen ist „Was ist der Unterschied zwischen mergeMap vs. switchMap vs. concatMap vs. ExhaustMap?“

Lassen Sie uns darauf eingehen und sie in einfachen Worten erklären.

Den Verhaltensunterschied erkläre ich anhand eines einfachen Beispiels:

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();

Im Codebeispiel, mit dem Sie auf Stackblitz experimentieren können, können Sie die Nachahmung von 3 Benutzerklicks sehen

Jetzt wollen wir sehen, was jeder der Operatoren zurückgibt

MergeMap

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

Der mergeMap-Operator führt die Emissionen parallel aus, weshalb Sie
sehen

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

mit Wert 0

SwitchMap

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

Der switchMap-Operator bricht den vorherigen nach jedem neuen Klick ab. In unserem Fall wird Erster Klick durch Zweiten Klick und Zweiter Klick abgebrochen durch Third Click abgebrochen und als Ergebnis sehen wir Third Click Values

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

Der concatMap-Operator speichert alle Klicks und protokolliert sie in der gleichen Reihenfolge, in unserem Fall Erster Klick, Zweiter Klick, Dritter Klick wie Sie sehen in der Konsole

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

Auspuffkarte

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

Der ExhaustMap-Operator blockiert den Stream, bis Erster Klick abgeschlossen ist. In unserem Fall werden Zweiter Klick und Dritter Klick ignoriert

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

Da Sie nun die Unterschiede zwischen diesen Operatoren verstehen, können Sie sich vorstellen, welche Folgen die Wahl des falschen Operators hat

Das obige ist der detaillierte Inhalt vonUnterschied zwischen mergeMap vs. switchMap vs. concatMap vs. ExhaustMap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!