​​​​​​​Rxjs map, mergeMap 和 switchMap 的區別與聯系

Posted on by

前言

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 的區別與聯系的文章就介紹到這瞭,更多相關Rxjs map與mergeMap 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：