【Angular】subscribeメソッドでエラーを取得して処理する方法【入門】

Angularでは、コンポーネントでsubscribeメソッドを使って、サービスからデータを受け取るのが一般的な気がします。
公式チュートリアルでもそのように実装していますよね。

私もチュートリアルから入ったのですが、その際に、サービスでエラーが起きたときにはどうやって取得するんだろうと疑問に思いました。

調べてみるととても簡単でしたので、私のような初学者向けにまとめてみようと思います。

そんなわけで、今回はsubscribeメソッドでエラーを処理する方法についてご紹介しますね。

subscribeメソッドの引数は3つある

まずは、公式チュートリアルをもとに、以下のような処理を用意します。

export class HeroesComponent implements OnInit {
  heroes: Hero[];
  constructor(private heroService: HeroService) { }
  ngOnInit() {}
// 以下の処理をもとに説明します
  getError(): void {
    this.heroService.getError()
    .subscribe(
      heroes => {
        this.heroes = heroes;
      });
  }
}

HeroServiceクラスで処理した結果をsubscribeメソッドで取得するものですね。
この場合は、HeroServiceクラスから結果が返却されたタイミングで以下の部分が実行されます。

heroes => {
  this.heroes = heroes;
});

これはsubscribeメソッドの第一引数が正常系の処理を行うものだからです。

以下を見てください。subscribeメソッドの定義になります。

subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;

Observable.d.ts

実はsubscribeメソッドの引数は3つあり、それぞれ以下の場合に実行されます。

つまり、subscribeメソッドでエラーを取得する場合には、第二引数を利用すれば良いのです。

subscribeメソッドでエラーを処理する方法

早速ですが、以下のように第二引数を利用すればエラーを取得することができます。

  getError(): void {
    this.heroService.getHeroes()
    .subscribe(
      heroes => {
        console.log('OK！');
        this.heroes = heroes;
      }, error => {
        console.log('エラーですよ');
      });
  }

エラーが返ってくると「エラーですよ」と表示されます。

モックを使用している場合など、意図的にサービスからエラーを返したい場合は、以下のようにすればOKです。

return throwError(hoge);

おまけ：subscribeメソッドが完了したときに処理する方法

ちなみに、処理が完了した際に処理を行いたい場合は、以下のように第三引数に記述すれば大丈夫です。

  getError(): void {
    this.heroService.getHeroes()
    .subscribe(
      heroes => {
        console.log('OK！');
        this.heroes = heroes;
      }, error => {
        console.log('エラーですよ');
      }, () => {
        console.log('処理が完了しました！');
      });
  }

このように実装すると、サービス内で処理が完了したタイミングで「処理が完了しました！」と表示されますよ。

終わりに

今回はAngularのsubscribeメソッドでエラーを処理する方法についてご紹介しました。

内容をまとめると以下のようになります。

今回はここまでです。それでは。