站長資訊網(wǎng)本篇文章帶大家深入了解一下Angular中常用的錯(cuò)誤處理方式，希望對(duì)大家有所幫助！
錯(cuò)誤處理是編寫代碼經(jīng)常遇見的并且必須處理的需求，很多時(shí)候處理異常的邏輯是為了避免程序的崩潰，本文將簡單介紹Angular處理異常的方式。【相關(guān)教程推薦：《angular教程》】
什么是Angular
Angualr 是一款來自谷歌的開源的 web 前端框架，誕生于 2009 年，由 Misko Hevery 等人創(chuàng)建，后為 Google 所收購。是一款優(yōu)秀的前端 JS 框架，已經(jīng)被用于 Google 的多款產(chǎn)品當(dāng)中。
AngularJS 是基于聲明式編程模式 是用戶可以基于業(yè)務(wù)邏輯進(jìn)行開發(fā). 該框架基于HTML的內(nèi)容填充并做了雙向數(shù)據(jù)綁定從而完成了自動(dòng)數(shù)據(jù)同步機(jī)制. 最后, AngularJS 強(qiáng)化的DOM操作增強(qiáng)了可測試性.
try/catch
最熟悉的的方式，就是在代碼中添加try/catch塊，在try中發(fā)生錯(cuò)誤，就會(huì)被捕獲并且讓腳本繼續(xù)執(zhí)行。然而，隨著應(yīng)用程序規(guī)模的擴(kuò)大，這種方式將變得無法管理。
ErrorHandler
Angular提供了一個(gè)默認(rèn)的ErrorHandler，可以將錯(cuò)誤消息打印到控制臺(tái)，因此可以攔截這個(gè)默認(rèn)行為來添加自定義的處理邏輯，下面嘗試編寫錯(cuò)誤處理類：
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下創(chuàng)建一個(gè)共享目錄shared，并將此文件放在providers文件夾中
現(xiàn)在，需要更改應(yīng)用程序的默認(rèn)行為，以使用我們自定義的類而不是ErrorHandler。修改app.module.ts文件，從@angular/core導(dǎo)入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請(qǐng)求/響應(yīng)的方法，就可以在傳遞它們之前處理。例如，可以在拋出錯(cuò)誤之前重試幾次HTTP請(qǐng)求。這樣，就可以優(yōu)雅地處理超時(shí)，而不必拋出錯(cuò)誤。
還可以在拋出錯(cuò)誤之前檢查錯(cuò)誤的狀態(tài)，使用攔截器，可以檢查401狀態(tài)錯(cuò)誤碼，將用戶重定向到登錄頁面。
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) { // 跳轉(zhuǎn)到登錄頁面 } 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 {}
多提供者用于創(chuàng)建可擴(kuò)展服務(wù)，其中系統(tǒng)帶有一些默認(rèn)提供者，也可以注冊其他提供者。默認(rèn)提供程序和其他提供程序的組合將用于驅(qū)動(dòng)系統(tǒng)的行為。
Notifications
在控制臺(tái)打印錯(cuò)誤日志對(duì)于開發(fā)者來說非常友好，但是對(duì)于用戶來說則需要一種更加友好的方式來告訴這些錯(cuò)誤何時(shí)從GUI中發(fā)生。根據(jù)錯(cuò)誤類型，推薦兩個(gè)組件：Snackbar和Dialog
-
Snackbar：推薦用于簡單的提示，比如表單缺少必填字段或通知用戶可預(yù)見的錯(cuò)誤（無效電子郵件、用戶名太長等）。 -
Dialog：當(dāng)存在未知的服務(wù)器端或客戶端錯(cuò)誤時(shí)，推薦使用這種方式；通過這種方式，可以顯示
