Angular的rxjs中的forkJoin作用和使用方法
有很多场景需要在多个接口返回之后再进行渲染界面,此时可以使用forkJoin在多个结果都返回时再进行下一步的操作。
具体使用方法如下:
举例1:
forkJoin([
this.aService.getData(),
this.bService.getData()
]).subscribe(resArr => {
// 此时的返回结果将被按顺序放在一个数组中
aData = resArr[0];
bData = resArr[1];
}
举例2:
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { HomeService } from 'src/app/services/home.service';
import { SingerService } from 'src/app/services/singer.service';
import { Banner, SongSheet, Singer, HotTag } from '../../services/data-types/common.types';
import { Observable, forkJoin } from 'rxjs';
import { first } from 'rxjs/internal/operators';
type HomeDataType = [Banner[], HotTag[], SongSheet[], Singer[]];
@Injectable()
export class HomeResolverService implements Resolve<HomeDataType> {
constructor(
private homeServe: HomeService,
private singerServe: SingerService
) {}
resolve(): Observable<HomeDataType> {
return forkJoin([
this.homeServe.getBanners(),
this.homeServe.getHotTags(),
this.homeServe.getPerosonalSheetList(),
this.singerServe.getEnterSinger()
]).pipe(first());
}
}
不过使用forkJoin也存在一定的风险,需要保证多个接口都能够成功返回结果。如果有个别的接口没有成功返回,使用forkJoin不好监听具体错误。