如何理解angular中的ErrorHandler

本篇內(nèi)容主要講解“如何理解angular中的ErrorHandler”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何理解angular中的ErrorHandler”吧!

ErrorHandler

ErrorHandler的默認實現(xiàn)將錯誤消息打印到 console。要攔截錯誤處理，請編寫一個自定義的異常處理器，該異常處理器將把此默認行為改成你應用所需的。

以實際開發(fā)中一個例子演示使用方式：
假如前端有提出一個新需求為前端添加全局錯誤處理并上報錯誤日志，處理如下：

1、創(chuàng)建錯誤處理的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){ }
  // 當程序中出現(xiàn)異常時，會自動調(diào)用 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},
...
]

當程序中出現(xiàn)異常時，會自動調(diào)用handleError鉤子，可判斷是客戶端還是來自服務端的異常。

3、在上面處理的是頁面發(fā)生的異常，實際開發(fā)中同時也需要上報接口等的異常，當前使用的是ng-alain框架，所以在default.interceptor.ts攔截器中添加代碼，具體參考：ng-alain—攔截網(wǎng)絡請求

  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(
     // 當請求發(fā)生錯誤時，使用一個管道把錯誤發(fā)送給錯誤處理器
      catchError((err: HttpErrorResponse) => this.handleData(err,newReq)),
      mergeMap((event: any) => {
        // 允許統(tǒng)一對請求錯誤處理，這是因為一個請求若是業(yè)務上錯誤的情況下其HTTP請求的狀態(tài)是200的情況下需要
        if (event instanceof HttpResponse && event.status === 200)
          return this.handleData(event);
        // 若一切都正常，則后續(xù)操作
        return of(event);
      }),
    );
  }

上面第3點的寫法中的不是通過自動調(diào)用handleError鉤子來處理錯誤的，在Interceptor攔截器中只能處理HttpErrorResponse類型的錯誤，如果這里處理了，那么ErrorHandler將捕獲不到。所以在Interceptor中，如果一定要通過handleError鉤子函數(shù)來處理錯誤，那么就需要將HttpErrorResponse類型的錯誤拋出。如下：

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

到此，相信大家對“如何理解angular中的ErrorHandler”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！