Angular - 错误处理

错误是在程序执行过程中发生的意外问题或故障。不正确的语法、无效输入、系统故障或 API 逻辑中的 bug 可能是这些错误的原因。这些错误可能会以负面方式影响用户体验，因此有必要在编译时处理它们。

错误处理是在执行前检测和解决这些错误或异常的过程。Angular 提供了多种处理错误的方法，我们将在本教程中学习这些方法。

Angular 中的错误处理

Angular 中有多种处理错误的方法，列出如下 −

• 使用 ErrorHandler class
• 使用 HttpInterceptor interface
• 使用 try-catch 块
• 使用 validation

使用 ErrorHandler Class

ErrorHandler 是 Angular @angular/core 包中的内置 class。它提供了一个全局捕获错误的钩子。当应用中任何地方发生未处理的异常时，这个 class 会捕获该异常并在控制台打印错误消息。

请记住！ErrorHandler class 只是简单地打印错误消息，以便开发者查看问题所在并修复它。但是，你可以通过创建自定义 ErrorHandler 来替换这种默认行为。

扩展 ErrorHandler class 并重写其 handleError() 方法，如下所示，以创建该 class 的自定义行为 −

import { Injectable, ErrorHandler } from '@angular/core';

@Injectable({
   providedIn: 'root'
})
export class GlobalErrorHandler implements ErrorHandler {
   handleError(error: any): void {
      // 将错误记录到外部服务或显示消息
      console.error("An error occurred:", error);
	  // 创建任何自定义行为
   }
}

使用 HttpInterceptor Interface

HttpInterceptor 是一个用于处理 HTTP 特定错误的 interface，例如网络问题、服务器错误等。它可以拦截并修改 HTTP 请求或响应。可以将其视为一个服务，用于检查和更改往返服务器的数据。

要使用 HttpInterceptor，创建一个实现 HttpInterceptor interface 的 class，并定义 intercept() 方法。该方法接收一个 HTTP 请求和一个 handler，并返回 HTTP 事件的 observable。在此方法中，你可以根据需要修改请求或响应。

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable({
   providedIn: 'root'
})
export class ErrorInterceptor implements HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return next.handle(req).pipe(
         catchError((error) => {
            // 处理错误 
            console.error('HTTP Error:', error);
            return throwError(error);
         })
      );
   }
}  

使用 Try-Catch 块

在 Angular 中，组件生命周期过程中可能会发生错误。为了处理这些错误，你可以在 ngOnInit() 中使用 try-catch 块，该方法是 OnInit 接口定义的组件生命周期钩子。实现此接口非常重要，因为它有助于检查组件是否正确初始化。

try 块 用于包装在执行过程中可能抛出错误的代码。而 catch 块 用于处理 try 块中发生的任何错误或异常。

这里，你可以看到一个带有 try-catch 块的组件：

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-example',
  imports: [CommonModule],
  templateUrl: './example.html',
  styleUrls: ['./example.css']
})
export class Example implements OnInit {

  ngOnInit() {
    try {
      // 可能抛出错误的代码
      throw new Error("Error message");
    } catch (error) {
      console.error("捕获到错误", error);
    }
  }
}

使用验证

在 Angular Forms 中，validation 用于在提交前验证用户输入是否为正确格式。Reactive forms 和 template-driven forms 内置了 validators 来处理验证错误。

使用 reactive forms，你可以轻松验证用户输入并显示自定义错误消息，如以下代码块所示 −

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
   selector: 'app-registration',
   imports: [CommonModule],
   templateUrl: './registration.html',
   styleUrls: ['./registration.css']
})
export class Registration {
   registrationForm: FormGroup;
   
   constructor(private fb: FormBuilder) {
      this.registrationForm = this.fb.group({
         username: ['', [Validators.required, Validators.minLength(4)]],
         email: ['', [Validators.required, Validators.email]],
      });
   }
   
   onSubmit() {
      if (this.registrationForm.invalid) {
         this.showValidationErrors();
         return;
      }
   }
   
   private showValidationErrors() {
      Object.keys(this.registrationForm.controls).forEach(control => {
         const formControl = this.registrationForm.get(control);
         if (formControl?.invalid) {
            console.error(`${control} is invalid`);
         }
      });
   }
}