Angualr中同时请求多个接口(forkJoin)

654 阅读1分钟

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不好监听具体错误。