Angular拦截器处理API错误时保留subscribe错误回调方案

你当前拦截器无法触发组件error回调的核心原因是：catchError中返回of(err as any)会将原本的错误流转换为正常输出流，RxJS会将该值作为正常响应传入next通道，中断错误传播链路，因此下游订阅的error回调永远不会执行。

核心修改点是处理完全局通用逻辑后不要吞掉错误，通过throwError将错误继续向下传递；如果需要支持部分接口跳过全局提示，使用Angular原生的HttpContext做标记即可，不需要在拦截器中硬编码接口地址耦合业务逻辑。

第一步：修改拦截器代码 #

import { Injectable } from '@angular/core';
import { 
    HttpInterceptor, 
    HttpErrorResponse, 
    HttpEvent, 
    HttpRequest, 
    HttpHandler, 
    HttpContextToken,
    HttpContext 
} from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import { ToastrService } from 'ngx-toastr';

/**
 * 上下文标记：标记当前请求不需要弹出全局错误提示
 * 可以抽离到http公共配置文件中统一维护
 */
export const SKIP_GLOBAL_ERROR_TOAST = new HttpContextToken<boolean>(() => false);

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
    constructor(private toastr: ToastrService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            catchError((err: HttpErrorResponse) => {
                if (err instanceof HttpErrorResponse) {
                    // 读取请求上的标记，判断是否需要跳过全局提示
                    const skipGlobalToast = req.context.get(SKIP_GLOBAL_ERROR_TOAST);
                    if (!skipGlobalToast) {
                        const errorMsg = err.error?.message || 'Internal Server Error';
                        this.toastr.error(errorMsg);
                    }
                    // 关键：重新抛出错误，保证错误流能传递到下游订阅的error回调
                    return throwError(() => err);
                }
                // 非HTTP类型错误直接抛出
                return throwError(() => err);
            })
        );
    }
}

第二步：业务层调用 #

场景1：保留全局提示 + 自定义错误逻辑 #

不需要额外配置，直接在subscribe的error回调中写专属业务逻辑即可，全局提示会正常弹出，自定义逻辑也会正常执行：

constructor(private http: HttpClientService) {}

sampleMethod() {
    this.http.getAllData().subscribe({
        next: response => {
            // 处理正常响应逻辑
        },
        error: error => {
            // 此处现在可正常触发，编写当前接口专属的错误处理逻辑
            console.log('接口请求失败，执行自定义业务流程', error);
        }
    });
}

场景2：不需要全局提示，完全自定义错误处理 #

发起请求时传入SKIP_GLOBAL_ERROR_TOAST标记，拦截器识别后会跳过全局提示，错误会完整传递到当前请求的error回调：

import { HttpClient } from '@angular/common/http';
import { SKIP_GLOBAL_ERROR_TOAST } from './http-error.interceptor'; // 替换为你的实际文件路径

constructor(private http: HttpClient) {}

customErrorHandleMethod() {
    this.http.get('/your/api/path', {
        context: new HttpContext().set(SKIP_GLOBAL_ERROR_TOAST, true)
    }).subscribe({
        next: res => {
            // 正常响应处理
        },
        error: err => {
            // 完全自定义错误逻辑，不会弹出全局提示
            if (err.status === 403) {
                // 例如跳转无权限页、自定义弹窗提示等
            }
        }
    })
}

注意：如果你对HttpClient做了二次封装，只要在封装方法中支持透传context参数即可，不需要修改原有调用逻辑。

• 完全兼容现有全局错误提示逻辑，存量业务代码不需要做任何改动
• 拦截器中没有耦合任何业务判断逻辑，所有接口专属处理都收敛在业务调用层
• 基于HttpContext实现的标记不会修改真实请求头，不会将自定义参数传递给后端
• 配置灵活，每个接口可以独立选择是否使用全局提示，同时所有请求的错误回调都能正常触发

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