mergeMap、switchMap、concatMap、exhaustMap 之間的差異

您好，在作為 Angular 開發人員進行面試時，您可能會被問到幾個有關 RxJ 運算符及其差異的問題。

最常見的問題之一是「mergeMap、switchMap、concatMap、exhaustMap 有什麼區別？」

讓我們深入探討並用簡單的術語解釋它們。

我將使用一個簡單的例子來解釋行為上的差異：

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

在您可以在 Stackblitz 上進行實驗的程式碼範例中，您可以看到 3 次使用者點擊的模擬

現在，讓我們看看每個運算子將回傳什麼

合併地圖

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

mergeMap 運算子並行運行排放，這就是你看到的原因

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

值為 0

切換地圖

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

switchMap 運算子將在每次新點擊後取消前一個，在我們的例子中，第一次點擊將被第二次點擊取消，第二次點選將被取消被第三次點擊取消，結果我們將看到第三次點擊值

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

concatMap 運算子將記住所有點擊，並以相同的順序console.log 它們，在我們的例子中，第一次點擊，第二次點擊， 第三次點擊為你在控制台中看到

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

排氣圖

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

exhaustMap 運算子將阻塞流，直到第一次點擊完成，在我們的例子中，第二次點擊和第三次點擊將被忽略

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

現在您了解了這些運算子之間的差異，您可以想像選擇錯誤的後果

以上是mergeMap、switchMap、concatMap、exhaustMap 之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！