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;
});