聊聊Angular中常用的错误处理方式

本篇文章带大家深入了解一下Angular中常用的错误处理方式，希望对大家有所帮助！

错误处理是编写代码经常遇见的并且必须处理的需求，很多时候处理异常的逻辑是为了避免程序的崩溃，本文将简单介绍Angular处理异常的方式。【相关教程推荐：《angular教程》】

什么是Angular

Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。

AngularJS 是基于声明式编程模式 是用户可以基于业务逻辑进行开发. 该框架基于HTML的内容填充并做了双向数据绑定从而完成了自动数据同步机制. 最后, AngularJS 强化的DOM操作增强了可测试性.

try/catch

最熟悉的的方式，就是在代码中添加try/catch块，在try中发生错误，就会被捕获并且让脚本继续执行。然而，随着应用程序规模的扩大，这种方式将变得无法管理。

ErrorHandler

Angular提供了一个默认的ErrorHandler，可以将错误消息打印到控制台，因此可以拦截这个默认行为来添加自定义的处理逻辑，下面尝试编写错误处理类：

import { ErrorHandler, Injectable } from "@angular/core"; import { HttpErrorResponse } from "@angular/common/http";  @Injectable() export class ErrorsHandler implements ErrorHandler {   handleError(error: Error | HttpErrorResponse) {     if (!navigator.onLine) {       console.error("Browser Offline!");     } else {       if (error instanceof HttpErrorResponse) {         if (!navigator.onLine) {           console.error("Browser Offline!");         } else {           // Handle Http Error (4xx, 5xx, ect.)           console.error("Http Error!");         }       } else {         // Handle Client Error (Angular Error, ReferenceError...)         console.error("Client Error!");       }       console.error(error);     }   } }

通常在app下创建一个共享目录shared，并将此文件放在providers文件夹中

现在，需要更改应用程序的默认行为，以使用我们自定义的类而不是ErrorHandler。修改app.module.ts文件，从@angular/core导入ErrorHandler，并将providers添加到@NgModule模块，代码如下：

import { NgModule, ErrorHandler } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms";  // Providers import { ErrorsHandler } from "./shared/providers/error-handler";  import { AppComponent } from "./app.component";  @NgModule({   imports: [BrowserModule, FormsModule],   declarations: [AppComponent],   providers: [{ provide: ErrorHandler, useClass: ErrorsHandler }],   bootstrap: [AppComponent] }) export class AppModule {}

HttpInterceptor

HttpInterceptor提供了一种拦截HTTP请求/响应的方法，就可以在传递它们之前处理。例如，可以在抛出错误之前重试几次HTTP请求。这样，就可以优雅地处理超时，而不必抛出错误。

还可以在抛出错误之前检查错误的状态，使用拦截器，可以检查401状态错误码，将用户重定向到登录页面。

import { Injectable } from "@angular/core"; import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor, HttpErrorResponse } from "@angular/common/http"; import { Observable, throwError } from "rxjs"; import { retry, catchError } from "rxjs/operators";  @Injectable() export class HttpsInterceptor implements HttpInterceptor {   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     return next.handle(request).pipe(       retry(1),       catchError((error: HttpErrorResponse) => {         if (error.status === 401) {           // 跳转到登录页面         } else {           return throwError(error);         }       })     );   } }

同样需要添加到app.module.ts中

import { NgModule, ErrorHandler } from "@angular/core"; import { HTTP_INTERCEPTORS } from "@angular/common/http"; import { BrowserModule } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms";  // Providers import { ErrorsHandler } from "./shared/providers/error-handler"; import { HttpsInterceptor } from "./shared/providers/http-interceptor";  import { AppComponent } from "./app.component";  @NgModule({   imports: [BrowserModule, FormsModule],   declarations: [AppComponent],   providers: [     { provide: ErrorHandler, useClass: ErrorsHandler },     { provide: HTTP_INTERCEPTORS, useClass: HttpsInterceptor, multi: true }   ],   bootstrap: [AppComponent] }) export class AppModule {}

多提供者用于创建可扩展服务，其中系统带有一些默认提供者，也可以注册其他提供者。默认提供程序和其他提供程序的组合将用于驱动系统的行为。

Notifications

在控制台打印错误日志对于开发者来说非常友好，但是对于用户来说则需要一种更加友好的方式来告诉这些错误何时从GUI中发生。根据错误类型，推荐两个组件：Snackbar和Dialog

• Snackbar：推荐用于简单的提示，比如表单缺少必填字段或通知用户可预见的错误（无效电子邮件、用户名太长等）。

• Dialog：当存在未知的服务器端或客户端错误时，推荐使用这种方式；通过这种方式，可以显示