Angular 2中如何通过HTTP拦截器在页面展示错误信息？

完全没问题——HTTP拦截器就是用来做这种全局请求/响应处理的，包括捕获错误并在页面展示提示。我来帮你修改你的拦截器代码，同时告诉你怎么把错误信息友好地展示给用户。

首先，我们需要用RxJS的catchError操作符来捕获请求过程中的错误，然后在错误处理逻辑里添加页面提示的代码。这里我假设你用Angular的Material Snackbar来展示提示（如果不用Material，换成你项目里的提示组件/服务就行）：

修改后的拦截器代码 #

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthService } from './auth.service';
// 假设你用Angular Material的Snackbar，没有的话换成自己的提示服务
import { MatSnackBar } from '@angular/material/snack-bar';

@Injectable()
export class InterceptorService implements HttpInterceptor {
  constructor(
    private authService: AuthService,
    private snackBar: MatSnackBar // 注入提示组件/服务
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 先添加请求头
    request = request.clone({
      setHeaders: {
        'x-auth-token': this.authService.getToken()
      }
    });

    // 处理请求和错误
    return next.handle(request).pipe(
      catchError(error => {
        // 提取错误信息，根据后端返回的格式调整
        const errorMessage = this.getErrorMessage(error);
        
        // 在页面展示错误信息
        this.showErrorToast(errorMessage);
        
        // 重新抛出错误，让发起请求的组件也能处理特定错误
        return throwError(() => error);
      })
    );
  }

  // 封装错误信息提取逻辑，适配不同的错误场景
  private getErrorMessage(error: any): string {
    // 后端返回的业务错误
    if (error.error?.message) {
      return error.error.message;
    }
    // HTTP状态码对应的错误
    switch (error.status) {
      case 401:
        return '登录已过期，请重新登录';
      case 403:
        return '没有权限访问该资源';
      case 404:
        return '请求的资源不存在';
      case 500:
        return '服务器内部错误，请稍后重试';
      default:
        return '请求失败，请检查网络或稍后重试';
    }
  }

  // 封装错误展示逻辑
  private showErrorToast(message: string): void {
    this.snackBar.open(message, '关闭', {
      duration: 5000, // 5秒后自动关闭
      verticalPosition: 'top', // 展示在顶部
      panelClass: ['error-toast'] // 可以自定义样式
    });
    // 如果不用Material，换成alert或者你自己的提示组件：
    // alert(message);
    // 或者调用自定义的提示服务：
    // this.notificationService.showError(message);
  }
}

关键说明： #

• 错误捕获：通过catchError操作符拦截请求错误，这个操作符会捕获所有HTTP请求失败的情况（包括网络错误、后端返回的错误状态码等）。
• 错误信息提取：我写了getErrorMessage方法来适配不同的错误场景——后端返回的自定义错误信息、不同HTTP状态码对应的通用提示，你可以根据自己项目的后端返回格式调整这部分逻辑。
• 页面展示：用showErrorToast封装展示逻辑，这里用了Material的Snackbar，你可以替换成项目里的任意提示组件（比如Element UI的Message、自定义的Toast组件等），甚至简单的alert（不过不推荐在生产环境用alert）。
• 重新抛出错误：处理完错误后用throwError重新抛出，这样发起请求的组件如果需要处理特定错误（比如401时跳转到登录页），依然可以在组件里订阅请求时捕获错误做进一步处理。

这样修改后，所有经过这个拦截器的HTTP请求，如果发生错误，都会自动在页面顶部弹出错误提示，不用在每个组件里重复写错误处理逻辑啦！

内容的提问来源于stack exchange，提问作者Aakriti.G