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

ngOnInit() {
  // [1][2][3]を並行で処理
  forkJoin(
    // ここから[1]
    forkJoin(
      // ここから[1-1]。A・B取得処理を並行
      this.fetchA(),
      this.fetchB()
      // ここまで[1-1]
    ).pipe(
      // [1-2]処理後
      // ここから[1-2]
      flatMap(([dataA, dataB]) =>
        // D・E・F取得処理を並行。AとBの取得結果も後続の処理に返す
        forkJoin(
          of(dataA),
          of(dataB),
          this.fetchD(dataA),
          this.fetchE(dataB),
          this.fetchF(dataA, dataB)
        )
      )
      // ここまで[1-2]
    ),
    // ここまで[1]
    this.fetchC(), // [2]
    this.otherObservableFn() // [3]
  ).pipe(
  // [1][2][3]処理後
    /*
     * ※resの中は
     * [
     *   [dataA, dataB, dataD, dataE, dataF], // [1]
     *   dataC, // [2]
     *   otherFn // [3]
     *  ]
     * です
     */
  ).subscribe(res => {
    this.createForm(res);
    this.showScreen = true;
  });
}

ngOnInit() {
  forkJoin(
    this.fetchBaseData(),
    this.fetchC(),
    this.otherObservableFn()
  ).pipe(
    /*
     * resの中身：
     * [
     *   { dataA, dataB, dataD, dataE, dataF }
     *   , dataC
     *   , otherObservableFnの戻り
     * ]
     * ここからmapでdataCもJSON形式に組み込み、
     * otherObservableFnの戻りを除外して
     * フォームに必要なデータだけ後続に返すようにする。
     */
    map(res => Object.assign({}, { ...res[0] }, { dataC: res[1] })
    // res2の中身： { dataA, dataB, dataD, dataE, dataF, dataC }
  ).subscribe(res2 => {
    this.createForm(res2);
    this.showScreen = true;
  );
}

// ※戻りの型は定義した方が良いです。
private fetchBaseData(): Observable<{ dataA: AModel, dataB: BModel, dataD: DModel, dataE: EModel, dataF: FModel }> {
  return forkJoin(this.fetchA(), this.fetchB()).pipe(
    flatMap(([dataA, dataB]) =>
      forkJoin(
        of(dataA),
        of(dataB),
        this.fetchD(dataA),
        this.fetchE(dataB),
        this.fetchF(dataA, dataB)
      )
    ),
    // JSON型で返すようにする
    map(res => {
      return {
        dataA: res[0],
        dataB: res[1],
        dataD: res[2],
        dataE: res[3],
        dataF: res[4]
      };
    })
  );
}