【Angular】複数の非同期処理完了後の処理はforkJoin()を使おう

forkJoinメソッドで複数の非同期処理を扱う

複数の非同期処理の完了後に処理を走らせる、C#で例えるならTask.WhenAll()のような処理をRxJSで記述するにはforkJoinメソッドを利用します。

サンプルコード

  import { forkJoin, Observable, of } from 'rxjs';

  // メイン処理
  public main(): void {
    const taskList: Observable<string>[] = [];

    // taskList内に非同期メソッドを追加
    taskList.push(this.sub(1));
    taskList.push(this.sub(2));
    taskList.push(this.sub(3));

    forkJoin(taskList).subscribe(resultList => {
      // taskList内の処理がすべて完了した後の処理
      console.log(resultList);
    });
  }

  // サブ処理（非同期）
  public sub(id: number): Observable<any> {
    // Observable型にして返す
    return of('Task' + id + ' is called!');
  }

処理結果

上記サンプルコード上のmain()メソッドのsubscribe後に出力するログはこのように出力されます。forkJoin()の結果は配列で返ってくるのがポイントです。

 ["Task1 is called!", "Task2 is called!", "Task3 is called!"]

実装方法

import

必要なクラス、ライブラリをRxJSからimportします。

import { forkJoin, Observable, of } from 'rxjs';

Observable型の配列作成

サンプルコードではmain()内でのtaskList作成部分です。
まずObservable型の配列を作成し、その配列に非同期処理（Observable型）を追加します。

    const taskList: Observable<string>[] = [];

    // taskList内に非同期メソッドを追加
    taskList.push(this.sub(1));
    taskList.push(this.sub(2));
    taskList.push(this.sub(3));

非同期処理

サンプルコードでは非同期処理をメソッド化しています。
この処理がmain()内のforkJoin()でそれぞれ呼び出されることにより、処理が並列実行されます。
非同期処理のため、戻り値はObservable型でなければなりません。

  // サブ処理（非同期）
  public sub(id: number): Observable<string> {
    // Observable型にして返す
    return of('Task' + id + ' is called!');
  }

非同期処理の実行と完了後の処理

作成したObservable型の配列を引数にforkJoin()を呼び出します。これで非同期処理を並列実行します。
配列内の非同期処理すべてが完了した後の処理についてはsubscribe()内に記述します。
非同期処理の戻り値は下記のコードのresultListに配列として入ります。

    forkJoin(taskList).subscribe(resultList => {
      // taskList内の処理がすべて完了した後の処理
      console.log(resultList);
    });