Angular ngOnInit内并列服务调用第二个请求未触发原因排查

你写的并列调用写法在Angular + RxJS体系下本身完全合法，正常情况下两个HTTP请求会并行发起。第二个请求无法发送和后端服务配置的Transient生命周期没有任何关联，核心问题基本都出在前端请求拦截逻辑上：

• 绝大多数同类问题都是全局HTTP拦截器的并发处理bug导致：最常见的是自动刷新JWT Token的拦截器实现，开发者会在Token过期时把所有并发发起的请求缓存到队列，等Token刷新完成后再重发队列请求，但很多实现存在缺陷，只会重发队列里的第一个请求，剩余请求直接被丢弃，就会出现并列调用时第二个请求根本发不出去的现象。
• 你写的嵌套串行调用能生效，本质是把两个请求从并行改成了串行：等第一个请求走完所有拦截器逻辑、拿到响应之后才发起第二个请求，此时拦截器的请求锁已经释放，不会触发并发队列的bug，所以请求能正常发送。但嵌套订阅是RxJS的典型反模式，会造成回调地狱、订阅难以统一管理、内存泄漏等问题，不推荐使用。

两个初始化请求没有先后依赖关系时，应当用forkJoin做并行请求组合，既符合RxJS编码规范，也能统一管理订阅，避免内存泄漏：

import { forkJoin } from 'rxjs';
import { first } from 'rxjs/operators';

// 组件类属性
planList: Array<any>;
countActive: any;
sub: Subscription;

ngOnInit() {
  // forkJoin会等待所有并行请求完成后统一返回结果
  this.sub = forkJoin({
    referralData: this.referralService.getAll().pipe(first()),
    planData: this.planService.getAll().pipe(first())
  }).subscribe({
    next: (res) => {
      this.countActive = res.referralData.data;
      this.planList = res.planData.map(item => ({
        value: item.name,
        planDetail: {
          percentage: item.profitPercent,
          month: item.duration
        }
      }));
    },
    error: (err) => {
      // 必须添加错误处理，避免单个请求报错导致整个组件逻辑崩溃
      console.error('页面初始化数据加载失败', err);
    }
  });
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

你可以按以下步骤定位具体问题：

• 打开浏览器开发者工具的Network面板，勾选Preserve log选项后刷新页面，查看/plan接口状态：如果请求根本没有出现在请求列表里，就是拦截器层把请求拦截丢弃了；如果请求状态为canceled，检查是否有其他逻辑在请求发起后立刻触发了组件销毁或主动取消了请求。
• 重点排查项目中所有HttpInterceptor的实现，尤其是涉及请求锁、Token刷新、请求重发的逻辑，修复并发场景下的队列处理bug即可从根源解决问题。

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