【Angular】HttpClientModuleのサーバ=クライアント通信におけるエラーハンドリング

2021年12月11日

前回HttpClientModuleを用いたサーバ=クライアント通信のやり方を紹介しました(こちら)。
そこで正常に通信が完了することを前提にしていましたが、今回はエラーハンドリングのやり方を紹介していきます。

スポンサーリンク

Subscribeにエラーハンドリングを定義する

前回subscribeメソッドを用いて通信後の処理を書いていきました。

this.httpClient.get('○○○○(URL)').subscribe(result =>{
  //通信後の処理を書いていく
});

実はsubscribeには最大3つまで引数を指定できます。

  1. 通信が正常に終了した際に実施する処理を定義する。
    (変数) => {処理}のように書いていくことにより、変数に通信により取得したデータを格納して、処理に使用できる。
  2. 通信がエラーとなってしまった場合に実施する処理を定義する。
    (変数) => {処理}のように書いていくことにより、変数に発生したエラーを格納して、処理に使用できる。
  3. これらの処理が完了した後に実施する処理を定義する。
    () => {処理}のようにしか書けない。

つまりこのようになります。

this.httpClient.get('○○○○(URL)',{
  params: {parameter:"○○○○"}
})
.subscribe(result =>{
  //通信後の処理を書いていく
},
error => {
  //エラー時の処理を書いていく
},
() => {
  //正常または異常時の処理が終了した後の処理を書いていく
});

ちなみに第2、3引数については指定しなくても問題ないです。

終わりに

前回のサーバ=クライアント通信のやり方と合わせて、これでAngularにおけるサーバ=クライアント通信は一通り実装できるようになったかとおもいます。
大体の開発において、これを使ってAPIをリクエストしていますが、他にもやり方があったらまた記事にしていこうかと思います。

スポンサーリンク

Angular開発

Posted by 社畜林檎