快捷導(dǎo)航

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

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

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

前言

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

map

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

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

讓我們舉個(gè)例子。假設(shè)我們有一個(gè) Observable 數(shù)組。這個(gè)數(shù)組是一個(gè) Person 的集合。一個(gè)對(duì)象代表每個(gè)人，每個(gè)人都有自己的名字和喜歡的角色。我們只對(duì)獲取所有角色的列表感興趣。

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 生成多個(gè) Observable。例如，現(xiàn)在我有一個(gè)角色數(shù)組，對(duì)于每個(gè)角色，我想進(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)目中的典型例子：輸入某個(gè)關(guān)鍵字，返回關(guān)鍵字對(duì)應(yīng)的明細(xì)，包裹在一個(gè) Observable 對(duì)象里。也就是說(shuō)，map 投影的輸出是一個(gè) Observable，而不是普通對(duì)象，因此上面的代碼編寫了丑陋的嵌套 subscribe 來(lái)獲取實(shí)際值。

使用 mergeMap 后，這個(gè)操作符能夠自動(dòng)將 map 返回的 Observable 進(jìn)行 flatten 操作。使用 map 時(shí)丑陋的雙重 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，但不會(huì)合并內(nèi)部 Observable。它改為切換到最新的 Observable 并將其傳遞給鏈。

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

對(duì)于我們的最后一個(gè)示例，如果我們使用 switchMap，我們只會(huì)從最后一個(gè) 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
)

有些場(chǎng)景是 switchMap 擅長(zhǎng)的，比如所謂的 typehead.

想象這樣一個(gè)場(chǎng)景：UI 上有一個(gè)輸入框，我們?cè)谄渲懈鶕?jù)最終用戶輸入的內(nèi)容，向其返回搜索結(jié)果。

如果用戶打算輸入 Chase，開(kāi)始輸入 C，然后觸發(fā)一個(gè) API 調(diào)用。然后客戶繼續(xù)輸入 h，我們就必須再次針對(duì) Ch 調(diào)用一次后臺(tái) API。此時(shí)，我們之前針對(duì) C 的 API 調(diào)用已經(jīng)毫無(wú)用處。我們應(yīng)該取消之前的 Observable，并訂閱 Ch 對(duì)應(yīng)的 Observable. 更一般性地說(shuō)，我們需要切換到最新的 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: