Angular 11如何实现error.errors及重构旧版本错误处理函数

Angular 从 7 升级到 11 后，HttpClient 返回的错误对象核心结构没有破坏性变更，最大的差异是 TypeScript 类型约束更严格，HttpErrorResponse 的 error 属性默认类型为 unknown，直接访问 errors、message 等自定义属性会触发编译报错，这也是需要调整 error.errors 逻辑的核心原因。

适配改写后的完整代码 #

// 首先从公共HTTP包导入错误类型定义
import { HttpErrorResponse } from '@angular/common/http';

// 可选：定义后端返回的错误结构类型，方便后续维护扩展
interface BackendCustomError {
  errors?: {
    email?: string;
    // 可根据实际业务补充其他验证字段
  };
  message?: string;
}

errorHandler(error: HttpErrorResponse): void {
  this.notify.clear();
  console.log(error);
  // 断言后端返回的响应体为自定义错误结构
  const backendError = error.error as BackendCustomError;

  // 用可选链替代多层非空判断，避免运行时报错+简化写法
  if (backendError?.errors?.email) {
    this.error = backendError.errors.email;
  } else if (error.message === 'Unauthorized') {
    this.error = null;
    this.notify.error("Invalid Login Details or email not confirmed", {timeout:0})
  } else {
    this.error = null;
    // 增加兜底逻辑，优先取后端返回的自定义错误信息，没有则用框架默认错误信息
    this.notify.error(backendError?.message || error.message, {timeout:0})
  }
}

核心调整点说明 #

• 给入参增加了HttpErrorResponse类型约束，符合Angular 11的强类型要求，解决隐式any导致的编译警告
• 用可选链运算符?.替代原有的多层与判断，写法更简洁，同时避免属性不存在时的运行时报错
• 对后端返回的响应体做了类型断言，如果不想单独定义类型，也可以直接写(error.error as any)?.errors?.email快速适配
• 补充了错误消息兜底逻辑，兼容性更好

如果该函数是全局错误处理器（实现ErrorHandler接口），需要额外兼容普通JS运行时错误，调整写法如下：

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

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: unknown): void {
    this.notify.clear();
    console.log(error);

    // 先判断是否为HTTP请求错误
    if (error instanceof HttpErrorResponse) {
      const backendError = error.error as { errors?: { email?: string }, message?: string };
      if (backendError?.errors?.email) {
        this.error = backendError.errors.email;
      } else if (error.message === 'Unauthorized') {
        this.error = null;
        this.notify.error("Invalid Login Details or email not confirmed", {timeout:0})
      } else {
        this.error = null;
        this.notify.error(backendError?.message || error.message, {timeout:0})
      }
      return;
    }

    // 处理普通JS运行时错误
    this.notify.error((error as Error)?.message || '未知错误', { timeout: 0 });
  }
}

内容的提问来源于stack exchange，提问作者user11352561