初期表示処理でいっぱいapi呼んでformを作成しないといけない時のRxJSの書き方


※追記

こちらの方が適切です
→ 初期表示処理でいっぱいapi呼んでformを作成しないといけない時のRxJSの書き方(最適化版)

並列
┣データAB取得(並列),
┃ ┗データDEF取得(並列)
┣データC取得,
┗その他非同期処理

form作成

初期表示処理の流れ

1.下記を並列で処理
データA取得
データB取得
データC取得
その他の非同期処理

2.下記は取得したデータAとBをキーに取得する
データD取得(データAがキー)
データE取得(データBがキー)
データF取得(データAとBがキー)

3.上記で取得したA〜Fのデータを基にformを作成する
4.form作成後、画面表示フラグをtrueにする

実装

※RxJSの記述法は6の前提です


myForm: FormGroup;

/** 画面表示フラグ */
showScreen = false;

ngOnInit() {
  // forkJoinは並列で処理します
  forkJoin(
    this.fetchA(),
    this.fetchB(),
    this.fetchC(),
    this.otherObservableFn() // その他の非同期処理
  ).pipe(
    // 非同期処理中に他の非同期処理を呼ぶ場合はflatMapを使います
    // ※他にもswitchmapやconcatmap等があります
    // タプルでA、B、Cの戻りを変数で指定できます。4つめの戻り値は不要なので省略できます
    flatMap(([dataA, dataB, dataC]) =>
      forkJoin(
        // dataA, dataB, dataCは次のcreateFormでも必要なのでofで返します
        of(dataA),
        of(dataB),
        of(dataC),
        this.fetchD(dataA),
        this.fetchE(dataB),
        this.fetchF(dataA, dataB)
      )
    )
  ).subscribe(res => {
    // resの中は[dataA,・・・,dataF]です
    this.createForm(res);
    // データを取得してformの作成が終わったので画面表示フラグをtrueにします
    this.showScreen = true;
  });
}

// B、Cも同じ様な関数です
private fetchA(): Observable<AModel> {
  // serviceの実装は省略します
  return this.dataAHttpService.fetch();
}

// E、Fも同じ様な関数です
private fetchD(dataA: AModel): Observable<DModel> {
  return this.dataDHttpService.fetch(dataA.id);
}

private createForm(res): void {
 // 実装は省略します
}