快捷導(dǎo)航

JavaScript Rxjs mergeMap 的使用場合

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

這篇文章主要介紹了JavaScript Rxjs mergeMap 的使用場合,mergeMap 接收一個(gè)函數(shù)作為輸入?yún)?shù)，這個(gè)函數(shù)的輸入?yún)?shù)就是通過 pipe 鏈接 mergeMap 的 Observable 里包含的元素

注意：

flatMap 是 mergeMap 的別名。
如果一次只能激活一個(gè)內(nèi)部訂閱，請使用 switchMap.
如果內(nèi)部 observables 的發(fā)射和訂閱順序很重要，請使用 concatMap.

當(dāng)需要展平內(nèi)部 observable 但想要手動(dòng)控制內(nèi)部訂閱的數(shù)量時(shí)，是 mergeMap 極佳的使用場合。

例如，當(dāng)使用 switchMap 時(shí)，每個(gè)內(nèi)部訂閱在源發(fā)出時(shí)完成，即任意時(shí)間段只允許一個(gè)活動(dòng)的內(nèi)部訂閱。相比之下，mergeMap 允許同時(shí)激活多個(gè)內(nèi)部訂閱。因此，mergeMap 最常見的用例之一是不應(yīng)取消的請求，這些請求被認(rèn)為是寫入而不是讀取。

一個(gè)典型的例子就是 SAP 電商云購物車?yán)锊煌许?xiàng)目的金額，可以并行地進(jìn)行增減操作。

請注意，如果這些寫入必須保持順序，則 concatMap 是更好的選擇。比如數(shù)據(jù)庫的寫操作。

由于 mergeMap 一次維護(hù)多個(gè)活動(dòng)的內(nèi)部訂閱，因此可能會(huì)由于長期存在的內(nèi)部訂閱造成內(nèi)存泄漏。一個(gè)基本的例子是，如果使用內(nèi)部計(jì)時(shí)器或 dom 事件流映射到可觀察對象。在這些情況下，如果仍然希望使用 mergeMap，一個(gè)好辦法是利用另一個(gè)運(yùn)算符來管理內(nèi)部訂閱的完成，比如考慮 take 或 takeUntil。當(dāng)然還可以使用 concurrent 參數(shù)限制一次活動(dòng)內(nèi)部訂閱的數(shù)量。

看一個(gè)例子：

import { fromEvent, of } from 'rxjs';
import { mergeMap, delay } from 'rxjs/operators';
// faking network request for save
const saveLocation = location => {
  return of(location).pipe(delay(500));
};
// streams
const click$ = fromEvent(document, 'click');

click$
  .pipe(
    mergeMap((e: MouseEvent) => {
      return saveLocation({
        x: e.clientX,
        y: e.clientY,
        timestamp: Date.now()
      });
    })
  )
  // Saved! {x: 98, y: 170, ...}
  .subscribe(r => console.log('Saved!', r));

saveLocation 是一個(gè)函數(shù)，它能把任何傳入的輸入?yún)?shù)，包裹成一個(gè) Observable，并且這個(gè) Observable 并不是立即 emit 數(shù)據(jù)，而是延遲 500 毫秒。

mergeMap 接收一個(gè)函數(shù)作為輸入?yún)?shù)，這個(gè)函數(shù)的輸入?yún)?shù)就是通過 pipe 鏈接 mergeMap 的 Observable 里包含的元素，即 MouseEvent；project 返回的數(shù)據(jù)類型是一個(gè)新的 Observable，包含了屏幕點(diǎn)擊的 X 和 Y 坐標(biāo)以及當(dāng)前時(shí)間戳。