关于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/