map,?mergeMap和switchMap的區別是什么

今天小編給大家分享一下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
)

以上就是“map, mergeMap和switchMap的區別是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。