Angulaire 2 - Gestion des erreurs

Les applications Angular 2 ont la possibilité de gérer les erreurs. Cela se fait en incluant la bibliothèque catch ReactJS, puis en utilisant la fonction catch.

Voyons le code requis pour la gestion des erreurs. Ce code peut être ajouté en haut du chapitre pour les opérations CRUD en utilisant http.

Dans le fichier product.service.ts, entrez le code suivant -

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()); 
   } 
}
  • La fonction catch contient un lien vers la fonction Error Handler.

  • Dans la fonction de gestionnaire d'erreurs, nous envoyons l'erreur à la console. Nous renvoyons également l'erreur au programme principal afin que l'exécution puisse continuer.

Désormais, chaque fois que vous obtenez une erreur, elle sera redirigée vers la console d'erreur du navigateur.