Perbezaan antara mergeMap lwn switchMap lwn concatMap lwn exhaustMap

Hai, dalam temu bual anda sebagai pembangun Angular, anda mungkin ditanya beberapa soalan tentang pengendali RxJs dan perbezaannya.

Salah satu soalan yang paling biasa ialah "Apakah perbezaan antara mergeMap vs switchMap vs concatMap vs exhaustMap?"

Mari kita mendalaminya dan menerangkannya secara ringkas.

Saya akan menerangkan perbezaan tingkah laku menggunakan satu contoh mudah:

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

Dalam contoh kod, yang anda boleh bereksperimen dengan Stackblitz, anda boleh melihat tiruan 3 klik pengguna

Sekarang, mari lihat apa yang akan dikembalikan oleh setiap pengendali

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

Pengendali mergeMap menjalankan pelepasan secara selari, itulah sebabnya anda melihat

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

dengan nilai 0

Peta Tukar

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

Pengendali switchMap akan membatalkan yang sebelumnya selepas setiap klik baharu, dalam kes kami Klik Pertama akan dibatalkan oleh Klik Kedua dan Klik Kedua akan dibatalkan oleh Klik Ketiga dan sebagai hasilnya kita akan melihat Nilai Klik Ketiga

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

Pengendali concatMap akan menghafal semua klik dan konsol.log mereka dalam susunan yang sama, dalam kes kami Klik Pertama, Klik Kedua, Klik Ketiga sebagai anda lihat dalam konsol

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

Peta Ekzos

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

Pengendali exhaustMap akan menyekat strim sehingga Klik Pertama selesai dan dalam kes kami Klik Kedua dan Klik Ketiga akan diabaikan

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

Sekarang anda memahami perbezaan antara pengendali ini, anda boleh bayangkan akibat daripada memilih yang salah

Atas ialah kandungan terperinci Perbezaan antara mergeMap lwn switchMap lwn concatMap lwn exhaustMap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!