Angular中HttpInterceptor与forkJoin配合无响应问题排查

我帮你分析下问题的根源，以及对应的解决办法：

问题核心原因 #

你遇到的问题和 forkJoin 的特性、拦截器的流设计直接相关：

• forkJoin 的规则很明确：只有当所有传入的 Observable 都完成时，才会发射最终的结果数组。
• 你的 token$ 是一个持续活跃的 Observable（比如 BehaviorSubject 这类不会自动完成的流），在拦截器中你直接返回了 token$.pipe(...)——这个流会一直订阅着 token$，不会自动结束。
• 虽然单个 HTTP 请求的流（next.handle(newReq)）会在请求完成后结束，但外层的 token$ 流还处于活跃状态，导致拦截器返回的整个 Observable 永远不会完成。forkJoin 就会一直等待所有流完成，自然不会触发你的订阅回调。

为什么加 take(1) 能临时解决？因为 take(1) 会让 token$ 流取到第一个值后就完成，这样整个拦截器的流会跟着 HTTP 请求的完成而结束，forkJoin 就能收到所有完成信号。但副作用很明显：后续如果 token 更新了，新的请求不会拿到最新的 token——因为 take(1) 只订阅一次就结束了。

正确解决方案 #

我们需要兼顾两个核心需求：每次请求都能拿到最新的 token，同时让拦截器返回的流能随着 HTTP 请求完成而结束。最稳妥的方式是每次请求时都临时订阅一次 token$，取到最新值后就取消订阅，修改后的拦截器代码如下：

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs'; 
import { map, switchMap, take } from 'rxjs/operators'; 
import { AppService } from './app.service'; 

@Injectable() 
export class AuthInterceptor implements HttpInterceptor { 
  constructor(private service: AppService) { } 

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return this.service.token$.pipe(
      take(1), // 关键：每次请求只取当前最新的token，然后结束对token$的订阅
      map((token: string) => { 
        if (token) { 
          const headers = req.headers.set('Authorization', `Bearer ${token}`); 
          console.log(`Request for url ${req.url}`); 
          req = req.clone({ headers }); 
        } 
        return req; 
      }), 
      switchMap(newReq => next.handle(newReq)) 
    ); 
  } 
}

方案解释 #

• take(1) 在这里的作用是：每次拦截请求时，都去获取 token$ 当前的最新值，然后立即取消对 token$ 的订阅——这样 token$ 流就会完成，整个拦截器的流会跟着 next.handle(newReq) 的 HTTP 请求流一起完成，forkJoin 就能正常触发回调。
• 每次新的请求都会重新订阅 token$，所以如果后续 token 更新了，新的请求会自动拿到最新的 token，完美解决了之前的副作用。

备选方案（同步获取token） #

如果你的 token$ 是 BehaviorSubject，且能确保 token 在请求发起前已经初始化完成（比如从本地存储同步读取），也可以用同步方式获取 token，代码更简洁：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
  const token = this.service.token$.getValue(); // 同步获取当前token
  if (token) { 
    const headers = req.headers.set('Authorization', `Bearer ${token}`); 
    console.log(`Request for url ${req.url}`); 
    req = req.clone({ headers }); 
  } 
  return next.handle(req); 
}

但这个方案有局限性：如果 token 是异步加载的（比如APP启动时从后端获取），那么在 token 加载完成前发起的请求会没有携带 token，所以更推荐第一种异步方案。

修改后你再测试 forkJoin 的调用，就能正常收到响应了。

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