
こんな悩みを解決できる記事を書きました!
僕は現役フリーランスエンジニア(歴9年)で、資格は13個保有しています。
「AngularでHTTPリクエストの終了処理を実装したい」とお考えではありませんか?
HTTPリクエストの終了処理は「addを使うパターン」と「finalizeを使うパターン」の2種類があります。
終了処理を実装できればローディングの解除などを確実に行えるので便利ですよ。



具体的なソースコード付きで解説するのでご安心を。
本記事では、AngularでHTTPリクエストの終了処理を実装する方法について分かりやすく解説します。


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



すぐ読み終わるので、ぜひ参考にしてくださいね♪
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の勉強なら「Angularアプリケーションプログラミング



最後までお読みいただき、ありがとうございました!
- クソおすすめ本



海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。