關於RxJS 處理多個Http請求 串行與並行方法

mergeMap

mergeMap 操作符用於從內部的 Observable 對象中獲取值，然后返回給父級流對象。

• 合並 Observable 對象

1 2 3 4 5 6

import { of } from "rxjs"; import { mergeMap } from "rxjs/operators"; const source$ = of("Hello"); const example$ = source$.pipe(mergeMap(val => of(`${val} World!`))); const subscribe = example$.subscribe(val => console.log(val));

在上面示例中包含兩種 Observable 類型：

• 源 Observable 對象 —— 即 source$ 對象。
• 內部 Observable 對象 —— 即 of(${val} World!) 對象。

僅當內部的 Observable 對象發出值后，才會合並源 Observable 對象輸出的值，並最終輸出合並的值。

forkJoin

forkJoin 是 RxJS 版本的 Promise.all()，即表示等到所有的 Observable 對象都完成后，才一次性返回值。

• 合並多個 Observable 對象

1 2 3 4 5 6 7 8 9

import { timer, forkJoin } from "rxjs"; import { mapTo } from "rxjs/operators"; const getPostOne$ = timer(1000).pipe(mapTo({ id: 1 })); const getPostTwo$ = timer(2000).pipe(mapTo({ id: 2 })); forkJoin(getPostOne$, getPostTwo$).subscribe( res => console.log(res) );

 

原文地址：https://semlinker.com/rxjs-handle-multi-http-request/