首页 >web前端 >js教程 > 正文

一起聊聊angular中的ErrorHandler

转载2021-10-12 10:40:210816
本篇文章带大家了解一下angular中的异常处理ErrorHandler,通过例子介绍一下ErrorHandler的使用方法,希望对大家有所帮助!

ErrorHandler

ErrorHandler的默认实现将错误消息打印到 console。要拦截错误处理,请编写一个自定义的异常处理器,该异常处理器将把此默认行为改成你应用所需的。【相关教程推荐:《angular教程》】

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

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);
        }
 })

更多编程相关知识,请访问:编程视频!!

以上就是一起聊聊angular中的ErrorHandler的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    javascript怎么对数组求和794
    在javascript中什么是伪数组447
    javascript三目运算符有几个等号655
    推荐视频教程
  • 极客学院AngularJS视频教程极客学院AngularJS视频教程
  • 小猫杯AngularJS视频教程小猫杯AngularJS视频教程
  • angular.js中文教学视频教程angular.js中文教学视频教程
  • AngularJS开发Web应用程序基础实例视频教程AngularJS开发Web应用程序基础实例视频教程
  • 视频教程分类