Rxjs map, mergeMap 和 switchMap 的區別和聯絡

map、mergeMap 和 switchMap 是 RxJS 中的三個主要運算子，在 SAP Spartacus 開發中有著廣泛的使用場景。

map

map 是 Observables 中最常見的運算子。它的作用與陣列中的對映相對相似。 map 接收從 Observable 發出的每個值，對其執行操作並返回一個 Observable（因此 Observable 鏈可以繼續）。

把它想象成一個函式，它將採用原始值和投影。該函式將投影應用於所述值並在轉換後返回它們。

讓我們舉個例子。假設我們有一個 Observable 陣列。這個陣列是一個 Person 的集合。一個物件代表每個人，每個人都有自己的名字和喜歡的角色。我們只對獲取所有角色的列表感興趣。

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const observable = of([
    {
        name: "Parwinder",
        character: "Calcifer"
    },
    {
        name: "Laure",
        character: "Alchemist"
    },
    {
        name: "Eliu",
        character: "X-Men"
    },
    {
        name: "Robert",
        character: "Link"
    }
]);

observable.pipe(
    map(arr => arr.map(person => person.character)) // loops over objects and returns characters
).subscribe(
    char => console.log(char) // ["Calcifer", "Alchemist", "X-Men", "Link"]
);

mergeMap

mergeMap 是 Observable map 和 mege 的組合。在實際專案中，經常需要 map 生成多個 Observable。例如，現在我有一個角色陣列，對於每個角色，我想進行後端呼叫並獲取一些資訊。

看下面的例子：

import { of, from } from 'rxjs';
import { map } from 'rxjs/operators';

const dummyApi = (character) => { // fake api call function
  return of(`API response for character: ${character}`).pipe(
    delay(1000) // the fake api takes 1 second
  );
}

from(["Calcifer", "Alchemist", "X-Men", "Link"]) // characters I need to get information for
.pipe(
  map(arr => dummyApi(arr)) // generates 4 new Observables
).subscribe( // subscribing Observable (outer) of 4 Observables (inner)
  data => data.subscribe(i => console.log(i)) // subscribing to inner Observables
)

dummyApi 是現實專案中的典型例子：輸入某個關鍵字，返回關鍵字對應的明細，包裹在一個 Observable 物件裡。也就是說，map 投影的輸出是一個 Observable，而不是普通物件，因此上面的程式碼編寫了醜陋的巢狀 subscribe 來獲取實際值。

使用 mergeMap 後，這個運算子能夠自動將 map 返回的 Observable 進行 flatten 操作。使用 map 時醜陋的雙重 subscribe 呼叫消失了。

import { of, from } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const dummyApi = (character) => {
  return of(`API response for character: ${character}`)..pipe(
    delay(1000)
  );
}

from(["Calcifer", "Alchemist", "X-Men", "Link"])
.pipe(
  mergeMap(arr => dummyApi(arr)) // gets 4 Observable as API response and merges them
).subscribe( // we subscribe to one mapped and merged Observable
  data => console.log(data)
)

switchMap

switchMap 的功能與 mergeMap 的功能相同，但略有不同。 switchMap 將訂閱外部 Observable 中的所有內部 Observable，但不會合並內部 Observable。它改為切換到最新的 Observable 並將其傳遞給鏈。

它仍然提供一個 Observable 作為輸出，不是透過合併，而是透過僅從最新的 Observable 發出結果的想法。

對於我們的最後一個示例，如果我們使用 switchMap，我們只會從最後一個 Observable 中獲取結果。

import { of, from } from 'rxjs';
import { switchMap, delay } from 'rxjs/operators';

const dummyApi = (character) => {
  return of(`API response for character: ${character}`).pipe(
    delay(1000)
  );
}

from(["Calcifer", "Alchemist", "X-Men", "Link"])
.pipe(
  switchMap(arr => dummyApi(arr))
).subscribe(
  data => console.log(data) // API response for character: Link
)

有些場景是 switchMap 擅長的，比如所謂的 typehead.

想象這樣一個場景：UI 上有一個輸入框，我們在其中根據終端使用者輸入的內容，向其返回搜尋結果。

如果使用者打算輸入 Chase，開始輸入 C，然後觸發一個 API 呼叫。然後客戶繼續輸入 h，我們就必須再次針對 Ch 呼叫一次後臺 API。此時，我們之前針對 C 的 API 呼叫已經毫無用處。我們應該取消之前的 Observable，並訂閱 Ch 對應的 Observable. 更一般性地說，我們需要切換到最新的 Observable.

import { of, from } from 'rxjs';
import { switchMap, delay } from 'rxjs/operators';

const dummyApi = (character) => {
  return of(`Search result for keyword: ${character}`).pipe(
    delay(1000)
  );
}

from(["C", "Ch", "Cha", "Chas", "Chase"]) // mimic key input in text field
.pipe(
  switchMap(arr => dummyApi(arr))
).subscribe(
  data => console.log(data) // Search result for keyword: Chase
)

Rxjs map, mergeMap 和 switchMap 的區別和聯絡

map

mergeMap

switchMap

相關文章