Angular 2 - 錯誤處理

Angular 2 應用程式具有錯誤處理選項。這可以透過包括 ReactJS 捕獲庫，然後使用捕獲函式來完成。

讓我們看看錯誤處理所需的程式碼。此程式碼可以新增到使用 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()); 
   } 
}

• 捕獲函式包含指向錯誤處理程式函式的連結。

• 在錯誤處理程式函式中，我們將錯誤傳送到控制檯。我們還將錯誤拋回主程式，以便執行可以繼續。

現在，每當你獲得錯誤時，它都將被重定向到瀏覽器的錯誤控制檯。