RxJS的 combineLatest 和 forkJoin

RxJS 是使用 Observables 的响应式编程的库,它使编写异步或基于回调的代码更容易。

combineLatest

说明：combineLatest接收多个Observable作为参数，只要其中任意一个Observable发射出值，combineLatest就会发射由每个Observable发出的最新值组成的数组。

使用场景：比如，订阅两个列表的数据，将两个列表的数据组装后展示。当任意一个列表的数据发生时，拿到两个列表的最新数据重新组装并展示。

import { Subject, combineLatest } from 'rxjs';
private ngUnsubscribe$ = new Subject();

combineLatest([observable1$, observable2$])
    .pipe(skip(1), takeUntil(this.ngUnsubscribe$)) // 注意在组件销毁后取消订阅
    .subscribe(data => {
        const observable1Data = data[0];
        const observable2Data = data[1];
    });

ngOnDestroy() {
    this.ngUnsubscribe$.next();
    this.ngUnsubscribe$.complete();
}

forkJoin

说明：forkJoin接收多个Observable作为参数，并等每个Observable都发射出值后，forkJoin发射出由每个observable发射的值组成数组。

使用场景：当需要等多个接口的数据都返回之后才能进行下一步操作时。

import { forkJoin } from 'rxjs';

forkJoin([
    this.http.get(`${api1}`),
    this.http.get(`${api2}`),
    this.http.get(`${api3}`),
]).subscribe(data => {
	// 三个接口返回的数据
    const [data0, data1, data2] = data;
});