スポンサーリンク

rxjsでエラー時と正常終了のどちらでも共通の処理を行う方法[Angular]

rxjsでエラー時と正常終了のどちらでも共通の処理を行う

Angularのrxjsでhttp通信の処理などを行った際、エラー時と正常終了のどちらでも共通の処理を行う方法について、気になったので調べました。

対応方法としては、rxjsオペレーターのfinalizeメソッドを使う方法があります。
try~catchのfinallyのように使えます。

コード例

以下のようにfinalizeオペレーターを使います。

    this.httpClient.get("https://url")
      .pipe(
        catchError((e) => {
          console.log("catchError");
          return throwError(() => e);
        }),
        finalize(() => console.log("finally"))
      )
      .subscribe((res) => console.log("subscribe"));

正常終了した場合、コンソールには、以下のように出力されます。

subscribe
finally

エラーの場合は、以下のように出力されます。

catchError
finally

上記の通り、正常終了でも、エラー終了でも、finalizeの処理が行われることをが確認できました。