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 函数包含一个指向错误处理函数的链接。

  • 在错误处理函数中,我们将错误发送到控制台。我们还将错误抛回主程序,以便继续执行。

现在,每当你收到错误时,它将被重定向到浏览器的错误控制台。