Angular 2-エラー処理

Angular 2アプリケーションには、エラー処理のオプションがあります。これは、ReactJS catchライブラリを含めてから、catch関数を使用することにより行われます。

エラー処理に必要なコードを見てみましょう。このコードは、httpを使用したCRUD操作の章の先頭に追加できます。

product.service.tsファイルでは、次のコードを入力してください-

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { IProduct } from './product';

@Injectable()
export class ProductService {
   private _producturl = 'app/products.json';
   constructor(private _http: Http){}

   getproducts(): Observable<IProduct[]> {
      return this._http.get(this._producturl)
      .map((response: Response) => <IProduct[]> response.json())
      .do(data => console.log(JSON.stringify(data)))
      .catch(this.handleError);
   }

   private handleError(error: Response) {
      console.error(error);
      return Observable.throw(error.json().error());
   }
}

catch関数には、エラーハンドラー関数へのリンクが含まれています。
エラーハンドラー関数では、コンソールにエラーを送信します。実行を継続できるように、メインプログラムにもエラーをスローします。

これで、エラーが発生するたびに、ブラウザのエラーコンソールにリダイレクトされます。

Angular2-error-handling

Angular 2-エラー処理