【Angular】HTTPリクエストの終了処理を実装する方法!

当ページのリンクには広告が含まれています。
【Angular】HTTPリクエストの終了処理を実装する方法
いずみ

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

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

AngularでHTTPリクエストの終了処理を実装したい」とお考えではありませんか?

HTTPリクエストの終了処理は「addを使うパターン」と「finalizeを使うパターン」の2種類があります。

終了処理を実装できればローディングの解除などを確実に行えるので便利ですよ。

いずみ

具体的なソースコード付きで解説するのでご安心を。

本記事では、AngularでHTTPリクエストの終了処理を実装する方法について分かりやすく解説します。

本記事を読めば、AngularでHTTPリクエストの終了処理を実装する方法が理解できるので早速見ていきましょう。

いずみ

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

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資歴5年(仮想通貨・FXが得意)
  • Twitterフォロワー約2,000人
  • 運営者情報はこちら
いずみです
目次

HTTPリクエストの終了処理を実装する方法

HTTPリクエストの終了処理は「addを使うパターン」と「finalizeを使うパターン」の2種類があるので、それぞれ解説します。

addを使うパターン

hoge() {
  this.apiService
    .subscribe({
    })
    .add(() => {
      console.log('終了処理');
    });
  }

addはsubscribe実行後に返却されるSubscriptionに定義されており、コールバック関数を引数に渡して使用します。

finalizeを使うパターン

hoge() {
  this.apiService
    .pipe(
      finalize(() => {
        console.log('終了処理');
      })
    )
    .subscribe({
    });
  }

finalizeはRxJSのオペレーターで、コールバック関数を引数に渡して使用します。

いずみ

最後に行われる処理なのにpipe内で定義されるので直感的に分かりにくいんですよね…

とはいえ、addよりもfinalizeの方がメソッド名は分かりやすいので個人的にはfinalizeの方が好きです。

まとめ

今回は、AngularでHTTPリクエストの終了処理を実装する方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • AngularでHTTPリクエストの終了処理を実装する方法は「add」と「finalize」の2種類ある。
まとめ♪
  • おすすめ本
¥4,070 (2023/07/23 15:56時点 | Amazon調べ)

Angularの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

【Angular】HTTPリクエストの終了処理を実装する方法

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次