快捷導(dǎo)航

???????Rxjs?map,?mergeMap?和?switchMap?的區(qū)別與聯(lián)系

更新時間：2022年07月01日 10:16:53 作者：??JerryWang_sap????

這篇文章主要介紹了???????Rxjs?map,mergeMap和switchMap的區(qū)別與聯(lián)系，map、mergeMap和switchMap是RxJS中的三個主要運(yùn)算符，在SAP?Spartacus開發(fā)中有著廣泛的使用場景

前言

map、mergeMap 和 switchMap 是 RxJS 中的三個主要運(yùn)算符，在 SAP Spartacus 開發(fā)中有著廣泛的使用場景。

map

map 是 Observables 中最常見的運(yùn)算符。它的作用與數(shù)組中的映射相對相似。 map 接收從 Observable 發(fā)出的每個值，對其執(zhí)行操作并返回一個 Observable（因此 Observable 鏈可以繼續(xù)）。

把它想象成一個函數(shù)，它將采用原始值和投影。該函數(shù)將投影應(yīng)用于所述值并在轉(zhuǎn)換后返回它們。

讓我們舉個例子。假設(shè)我們有一個 Observable 數(shù)組。這個數(shù)組是一個 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 的組合。在實(shí)際項(xiàng)目中，經(jīng)常需要 map 生成多個 Observable。例如，現(xiàn)在我有一個角色數(shù)組，對于每個角色，我想進(jìn)行后端調(diào)用并獲取一些信息。

看下面的例子：

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 是現(xiàn)實(shí)項(xiàng)目中的典型例子：輸入某個關(guān)鍵字，返回關(guān)鍵字對應(yīng)的明細(xì)，包裹在一個 Observable 對象里。也就是說，map 投影的輸出是一個 Observable，而不是普通對象，因此上面的代碼編寫了丑陋的嵌套 subscribe 來獲取實(shí)際值。

使用 mergeMap 后，這個操作符能夠自動將 map 返回的 Observable 進(jìn)行 flatten 操作。使用 map 時丑陋的雙重 subscribe 調(diào)用消失了。

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 中的所有內(nèi)部 Observable，但不會合并內(nèi)部 Observable。它改為切換到最新的 Observable 并將其傳遞給鏈。

它仍然提供一個 Observable 作為輸出，不是通過合并，而是通過僅從最新的 Observable 發(fā)出結(jié)果的想法。

對于我們的最后一個示例，如果我們使用 switchMap，我們只會從最后一個 Observable 中獲取結(jié)果。

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 上有一個輸入框，我們在其中根據(jù)最終用戶輸入的內(nèi)容，向其返回搜索結(jié)果。

如果用戶打算輸入 Chase，開始輸入 C，然后觸發(fā)一個 API 調(diào)用。然后客戶繼續(xù)輸入 h，我們就必須再次針對 Ch 調(diào)用一次后臺 API。此時，我們之前針對 C 的 API 調(diào)用已經(jīng)毫無用處。我們應(yīng)該取消之前的 Observable，并訂閱 Ch 對應(yīng)的 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
)

到此這篇關(guān)于Rxjs map, mergeMap 和 switchMap 的區(qū)別與聯(lián)系的文章就介紹到這了,更多相關(guān)Rxjs map與mergeMap 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: