JavaScript Rxjs mergeMap 的使用場合
注意:
- 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í)間戳。
最后產(chǎn)生的輸出:
到此這篇關(guān)于JavaScript Rxjs mergeMap 的使用場合的文章就介紹到這了,更多相關(guān)JS Rxjs mergeMap 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
npm install 、npm install --save 和&n
這篇文章主要介紹了npm install 、npm install --save 和 npm install --save-dev的區(qū)別介紹,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04JS實(shí)現(xiàn)簡單的點(diǎn)贊與踩功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的點(diǎn)贊與踩功能,涉及javascript針對頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12javascript中call,apply,callee,caller用法實(shí)例分析
這篇文章主要介紹了javascript中call,apply,callee,caller用法,結(jié)合實(shí)例形式分析了javascript中call,apply,callee,caller功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07JS實(shí)現(xiàn)的計(jì)數(shù)排序與基數(shù)排序算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的計(jì)數(shù)排序與基數(shù)排序算法,結(jié)合實(shí)例形式簡單分析了計(jì)數(shù)排序與基數(shù)排序的原理與JS實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12淺談一個(gè)webpack構(gòu)建速度優(yōu)化誤區(qū)
這篇文章主要介紹了淺談一個(gè)webpack構(gòu)建速度優(yōu)化誤區(qū),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06Javascript實(shí)現(xiàn)登錄框拖拽效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)登錄框拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10uniapp開發(fā)H5使用formData上傳文件解決方案
我們很多時(shí)候上傳文件就是使用FormData,然而uniapp默認(rèn)不支持FormData類型數(shù)據(jù)的上傳,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)H5使用formData上傳文件的相關(guān)資料,需要的朋友可以參考下2023-12-12