Angular中的ErrorHandler如何处理错误？

本文共计1133个文字，预计阅读时间需要5分钟。

本文带大家了解Angular中的异常处理ErrorHandler，通过例子介绍ErrorHandler的使用方法，希望对大家有所帮助！

`ErrorHandler` 的使用方法：

1. 在Angular组件中，我们可以通过`@Injectable`装饰器创建一个错误处理服务。

2.在服务中，我们实现`ErrorHandler`接口，并覆盖` handleError`方法。

3.在组件的构造函数中，注入这个错误处理服务到`errorHandler`属性。

4.将组件的`errorHandler`属性赋值给Angular的`errorHandler`。

以下是一个简单的例子：

typescript

import { Injectable } from '@angular/core';import { ErrorHandler, InjectableErrorHandler } from '@angular/core';

@Injectable({ providedIn: 'root'})export class CustomErrorHandler implements ErrorHandler { constructor(private errorHandler: InjectableErrorHandler) {}

handleError(error: Error): void { this.errorHandler.handleError(error); }}

@Component({ selector: 'app-root', template: ''})export class AppComponent { constructor(private errorHandler: ErrorHandler) { this.errorHandler=new CustomErrorHandler(); }}

在这个例子中，我们创建了一个自定义的错误处理服务`CustomErrorHandler`，它注入了Angular的默认错误处理器`InjectableErrorHandler`。然后，我们在`AppComponent`的构造函数中实例化了`CustomErrorHandler`，将其赋值给`errorHandler`。

这样，当Angular组件发生错误时，`CustomErrorHandler`会捕获错误，并调用默认的错误处理器进行处理。

希望这篇文章能对大家有所帮助！

本篇文章带大家了解一下angular中的异常处理ErrorHandler，通过例子介绍一下ErrorHandler的使用方法，希望对大家有所帮助！

ErrorHandler

ErrorHandler的默认实现将错误消息打印到 console。要拦截错误处理，请编写一个自定义的异常处理器，该异常处理器将把此默认行为改成你应用所需的。

以实际开发中一个例子演示使用方式：
假如前端有提出一个新需求为前端添加全局错误处理并上报错误日志，处理如下：

1、创建错误处理的error-handler.service.ts

import { HttpClient } from '@angular/common/http'; import { ErrorHandler, Injectable } from '@angular/core'; @Injectable() export class AppGlobalErrorhandler implements ErrorHandler { constructor(private http:HttpClient){ } // 当程序中出现异常时，会自动调用 handleError 钩子，可判断是客户端还是来自服务端的异常。 handleError(error) { // 打印错处信息 console.warn("customize catch execption:" , error.stack); // ... // 异常处理逻辑 // ... if(['ExpressionChangedAfterItHasBeenCheckedError'].every(item => !error.stack.includes(item))){ // 上报错误日志 this.http.post('/api/errorLog', { url: location.href, type: 'WEB', error: error.stack, message: error.toString() }).subscribe() } } }

2、在app.module.ts中添加

import { AppGlobalErrorhandler } from './service/error-handler.service'; ... providers: [ ... { provide: ErrorHandler, useClass: GlobalErrorHandler}, ... ]

当程序中出现异常时，会自动调用handleError钩子，可判断是客户端还是来自服务端的异常。

3、在上面处理的是页面发生的异常，实际开发中同时也需要上报接口等的异常，当前使用的是ng-alain框架，所以在default.interceptor.ts拦截器中添加代码，具体参考：ng-alain—拦截网络请求

private handleData( event: HttpResponse<any> | HttpErrorResponse, data?:any ): Observable<any> { // 判断是否为错误实例 if (event instanceof HttpErrorResponse && event.url.indexOf('api/errorLog') === -1) { // 上报接口错误日志 this.http.post('/api/errorLog', { url: event.url, type: 'INTERFACE', message: event.message, status: event.status, statusText: event.statusText, param: JSON.stringify(data['body']||undefined), body: JSON.stringify((event as any)['body'] || undefined), error:JSON.stringify( event.error), }).subscribe() } return of(event); } // 拦截器 intercept( req: HttpRequest<any>, next: HttpHandler, ){ return next.handle(newReq).pipe( // 当请求发生错误时，使用一个管道把错误发送给错误处理器 catchError((err: HttpErrorResponse) => this.handleData(err,newReq)), mergeMap((event: any) => { // 允许统一对请求错误处理，这是因为一个请求若是业务上错误的情况下其HTTP请求的状态是200的情况下需要 if (event instanceof HttpResponse && event.status === 200) return this.handleData(event); // 若一切都正常，则后续操作 return of(event); }), ); }

上面第3点的写法中的不是通过自动调用handleError钩子来处理错误的，在Interceptor拦截器中只能处理HttpErrorResponse类型的错误，如果这里处理了，那么ErrorHandler将捕获不到。所以在Interceptor中，如果一定要通过handleError钩子函数来处理错误，那么就需要将HttpErrorResponse类型的错误抛出。如下：

catchError((error: HttpErrorResponse) => { if (error.status === 401) { // 跳到登录页或者刷新token } else { return throwError(error); } })

更多编程相关知识，请访问：编程视频！！