この記事では、Angular で一般的に使用されるエラー処理方法について詳しく説明します。皆様のお役に立てれば幸いです。
エラー処理は、コードを記述するときに頻繁に発生する要件であり、処理する必要があります。多くの場合、例外処理のロジックは、プログラムのクラッシュを回避することです。この記事では、簡単に紹介します。 Angular 例外を処理する方法。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
Angualr は Google のツールです。オープンソースの Web フロントエンド フレームワークは 2009 年に誕生し、Misko Hevery らによって作成され、後に Google に買収されました。これは、多くの Google 製品で使用されている優れたフロントエンド JS フレームワークです。
AngularJS は宣言型プログラミング モデルに基づいており、ユーザーはビジネス ロジックに基づいて開発できます。フレームワークは HTML コンテンツの入力と双方向のデータ バインディングに基づいており、自動データ同期メカニズムを完成させます。 、AngularJS の強化された DOM 操作により、テスト容易性が向上します。
最も一般的な方法は、コード catch## に try/ を追加することです。 # ブロックでは、try でエラーが発生した場合、エラーが捕捉され、スクリプトは実行を継続します。ただし、アプリケーションのサイズが大きくなるにつれて、このアプローチは管理できなくなります。
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 ファイルを変更し、ErrorHandler を @angular/core からインポートし、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 {} は 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<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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 {}</pre><div class="contentsignin">ログイン後にコピー</div></div>
通知
と Dialog
: 単純なプロンプトに推奨されます。フォームに必須フィールドが欠落している場合や、予測可能なエラー (無効な電子メール、ユーザー名が長すぎるなど) をユーザーに通知する場合などです。
: この方法は、サーバー側またはクライアント側で不明なエラーがある場合に推奨されます。この方法により、より多くの説明を表示したり、call-to-action (ユーザーが電子メールを入力してバグを追跡できるようにするなど)。
フォルダーに追加し、新しい services フォルダーを作成して、ファイルを作成します: notification.service.ts、コードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">import { Injectable } from "@angular/core";
import { MatSnackBar } from "@angular/material/snack-bar";
@Injectable({
providedIn: "root"
})
export class NotificationService {
constructor(public snackBar: MatSnackBar) {}
showError(message: string) {
this.snackBar.open(message, "Close", { panelClass: ["error"] });
}
}</pre><div class="contentsignin">ログイン後にコピー</div></div>Update
、NotificationService: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { ErrorHandler, Injectable, Injector } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
// Services
import { NotificationService } from "../services/notification.service";
@Injectable()
export class ErrorsHandler implements ErrorHandler {
//Error handling需要先加载，使用Injector手动注入服务
constructor(private injector: Injector) {}
handleError(error: Error | HttpErrorResponse) {
const notifier = this.injector.get(NotificationService);
if (!navigator.onLine) {
//console.error("Browser Offline!");
notifier.showError("Browser Offline!");
} else {
if (error instanceof HttpErrorResponse) {
if (!navigator.onLine) {
//console.error("Browser Offline!");
notifier.showError(error.message);
} else {
// Handle Http Error (4xx, 5xx, ect.)
// console.error("Http Error!");
notifier.showError("Http Error: " + error.message);
}
} else {
// Handle Client Error (Angular Error, ReferenceError...)
// console.error("Client Error!");
notifier.showError(error.message);
}
console.error(error);
}
}
}</pre><div class="contentsignin">ログイン後にコピー</div></div>##コンポーネント内の #If エラーがスローされると、素敵な snackbar
ログとエラー トレース
Rollbar、Sentry、Bugsnag などの既存のソリューションを使用できるバックエンド サービスが必要です。 次に、単純なエラー追跡サービスを作成します。logging.service.ts
import { Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
@Injectable({
providedIn: "root"
})
export class LoggingService {
constructor() {}
logError(error: Error | HttpErrorResponse) {
// This will be replaced with logging to either Rollbar, Sentry, Bugsnag, ect.
if (error instanceof HttpErrorResponse) {
console.error(error);
} else {
console.error(error);
}
}
}サービスを error-handler.ts中：import { ErrorHandler, Injectable, Injector } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
// Services
import { NotificationService } from "../services/notification.service";
import { LoggingService } from "../services/logging.service";
@Injectable()
export class ErrorsHandler implements ErrorHandler {
//Error handling需要先加载，使用Injector手动注入服务
constructor(private injector: Injector) {}
handleError(error: Error | HttpErrorResponse) {
const notifier = this.injector.get(NotificationService);
const logger = this.injector.get(LoggingService);
if (!navigator.onLine) {
//console.error("Browser Offline!");
notifier.showError("Browser Offline!");
} else {
if (error instanceof HttpErrorResponse) {
if (!navigator.onLine) {
//console.error("Browser Offline!");
notifier.showError(error.message);
} else {
// Handle Http Error (4xx, 5xx, ect.)
// console.error("Http Error!");
notifier.showError("Http Error: " + error.message);
}
} else {
// Handle Client Error (Angular Error, ReferenceError...)
// console.error("Client Error!");
notifier.showError(error.message);
}
// console.error(error);
logger.logError(error);
}
}
}ここまで、エラー処理メカニズム全体を紹介しました。これは、他のフレームワークや言語で開発されたプロジェクトの処理方法と基本的に似ています。
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！
以上がAngular で一般的に使用されるエラー処理方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
