为何我的Angular拦截器函数中必须调用subscribe？

你的核心问题是拦截器中错误调用了subscribe()，打断了Observable的订阅链。拦截器不需要手动订阅，因为发起HTTP请求的组件/服务会负责订阅，拦截器只需返回Observable，让它沿着订阅链传递即可。

代码中的错误点 #

1. catchError使用async关键字：这会将Observable转换为Promise，破坏RxJS的链式调用逻辑。
2. handle401Error中调用.subscribe()：该方法会返回Subscription对象，而非Observable，导致拦截器无法将响应传递给上游订阅者。
3. catchError的else分支未返回值：直接调用next.handle(request)但不返回，导致没有结果传递到订阅链。

修正后的代码 #

import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpErrorResponse
} from "@angular/common/http";
import { Injectable } from "@angular/core";
import { BehaviorSubject, Observable, throwError } from "rxjs";
import { switchMap, filter, take, tap, catchError } from 'rxjs/operators';
import { AuthService } from "./auth.service";
import { MyHttpGetService } from "./http.service";
import { iToken } from "../../interfaces/token.interface";

@Injectable()
export class AddHeaderInterceptor implements HttpInterceptor {
  private isRefreshing = false;
  private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  constructor(
    private authenticationService: AuthService,
    private httpApiService: MyHttpGetService,
  ) { }

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const authToken = this.authenticationService.getToken();
    request = this.addToken(request, authToken);

    return next.handle(request).pipe(
      catchError((err: HttpErrorResponse) => {
        if (
          [401, 403].includes(err.status) &&
          !request.url.includes("GetRefreshToken")
        ) {
          console.log('retry here', request);
          return this.handle401Error(request, next);
        } else {
          // 抛出错误让上游处理
          return throwError(() => err);
        }
      })
    );
  }

  private addToken(request: HttpRequest<any>, authToken: iToken) {
    return request.clone({
      setHeaders: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${authToken.accessToken}`,
      },
    });
  }

  private handle401Error(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const currToken = this.authenticationService.getToken();
    if (!this.isRefreshing) {
      this.isRefreshing = true;
      this.refreshTokenSubject.next(null);

      return this.httpApiService.getAccessToken(currToken).pipe(
        tap((response: any) => {
          this.authenticationService.setAccessToken(response.body);
        }),
        switchMap((res) => {
          this.isRefreshing = false;
          this.refreshTokenSubject.next(res.body);
          return next.handle(this.addToken(request, res.body));
        }),
        catchError((err) => {
          this.isRefreshing = false;
          // 处理刷新令牌失败的情况，比如跳转到登录页
          this.authenticationService.logout();
          return throwError(() => err);
        })
      );
    } else {
      return this.refreshTokenSubject.pipe(
        tap((token) => console.log('refreshToken else', token)),
        filter(token => token != null),
        take(1),
        switchMap(token => {
          return next.handle(this.addToken(request, token));
        })
      );
    }
  }
}

关键修改说明 #

1. 移除catchError中的async关键字：保持RxJS的Observable链式调用，避免转换为Promise。
2. 删除handle401Error中的.subscribe()：直接返回Observable，让上游订阅者处理订阅逻辑。
3. 修正catchError的else分支：返回throwError(() => err)，将错误传递给上游，确保订阅链能正确处理错误。
4. 新增刷新令牌失败的错误处理：在getAccessToken的catchError中处理刷新失败的情况，比如登出用户。

为什么示例中不需要调用subscribe？ #

拦截器是Angular HTTP请求管道的中间件，它的职责是转换请求/响应、处理错误，最终需要将Observable返回给发起请求的组件/服务。发起请求的地方（比如组件里的this.http.get().subscribe(...)）才是负责订阅的环节。手动调用subscribe()会提前消费Observable，导致上游无法获取响应，破坏整个订阅链。

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