※追記
こちらの方が適切です
→ 初期表示処理でいっぱい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 {
// 実装は省略します
}