【Angular】forkJoinで複数のObservableをまとめて処理する方法！

2024年7月26日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

forkjoinで複数のObservableを処理する方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。

RxJSで複数のObservableを並列に処理したいことってよくありますよね？

そういった場合に便利なのが「forkJoin」です。

いずみ

forkJoinを使えば、複数のObservableを並列で処理できます。

Promise.all()のRxJS版ですね。

本記事では、RxJSのforkJoinについて分かりやすく解説します。

本記事を読めば、RxJSのforkJoinをざっくり理解できるので早速見ていきましょう。

いずみ

すぐ読み終わるので、ぜひ参考にしてくださいね♪

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
投資歴5年（仮想通貨・FXが得意）
Twitterフォロワー約2,000人
運営者情報はこちら

いずみです

forkjoinで複数のObservableを処理する方法

早速ですが、forkjoinで複数のObservableを処理する方法を解説します。

import { forkJoin } from 'rxjs';

forkJoin([
    observableA$,
    observableB$,
    observableC$
]).subscribe(
    data => {
        console.log(data[0]); // observableA$の返り値
        console.log(data[1]); // observableB$の返り値
        console.log(data[2]); // observableC$の返り値
    }
);

forkJoinを使うことで複数のObservableを並列で処理し、全Observableの完了を待って処理を行えます。

Promise.all()のRxJS版ですね。

いずみ

返却値の順番はforkJoinに指定したObservableの順番と同じになります。

けっこう便利なので重宝してます笑

RxJS

forkJoin – RxJS