LoginSignup
4
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-03-05

※追記

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1