8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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);
    });
8
3
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
8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?