Angular Subscription 被调用两次，如何避免重复请求？

2026-10-24数据小陈

结论

不要在 subscribe() 里再次调用 subscribe()。可以把获取 style 和 price 的请求组合成一条 Observable 链，最后只订阅一次。

不过，示例代码本身不会让 getStyleByID() 无故对同一个 config 调用两次。数据翻倍通常与以下情况有关：

getStyles() 被调用了两次；
configs 中有重复的 config.id；
多处订阅了同一个冷 Observable；
组件被创建了两次，或者父组件和子组件分别触发了加载；
重新加载前没有清空 garage。

Angular 不会自动执行两遍同一个 HttpClient 请求。应先找到重复发生的位置，再判断是否需要共享请求。

推荐改法：组合请求，只订阅一次

如果每个 style 都需要单独获取 price，可以使用 from() 和 mergeMap()：

import { from } from 'rxjs';
import { map, mergeMap, toArray } from 'rxjs/operators';

getStyles(configs: any[]): void {
  from(configs).pipe(
    mergeMap(config =>
      this._APIService.getStyleByID(config.id).pipe(
        map(style => ({
          ...style,
          config
        }))
      )
    ),
    mergeMap(style =>
      this._priceService.getPrice().pipe(
        map(price => ({
          ...style,
          price
        }))
      )
    ),
    toArray()
  ).subscribe({
    next: styles => {
      this.garage = styles;
      console.log(this.garage);
    },
    error: error => {
      console.error('Failed to load styles or prices', error);
    }
  });
}

这种写法只在最后调用一次 subscribe()，也不会在异步回调中反复修改数组并执行 push。每个 config 都会生成一个最终结果，重新加载时则直接替换 garage，避免旧数据继续累积。

mergeMap() 会并发发送请求，因此结果顺序不一定和 configs 一致。如果必须保持原有顺序，可以改用 concatMap()：

import { concatMap, map, toArray } from 'rxjs/operators';

getStyles(configs: any[]): void {
  from(configs).pipe(
    concatMap(config =>
      this._APIService.getStyleByID(config.id).pipe(
        map(style => ({
          ...style,
          config
        }))
      )
    ),
    concatMap(style =>
      this._priceService.getPrice().pipe(
        map(price => ({
          ...style,
          price
        }))
      )
    ),
    toArray()
  ).subscribe(styles => {
    this.garage = styles;
  });
}

这样会依次执行请求，整体耗时可能更长。

如果 price 只需要请求一次

如果所有 style 共用同一个 price，就没有必要为每个 style 分别调用 getPrice()。可以用 forkJoin() 同时获取 price 和全部 styles：

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

getStyles(configs: any[]): void {
  const styleRequests = configs.map(config =>
    this._APIService.getStyleByID(config.id).pipe(
      map(style => ({
        ...style,
        config
      }))
    )
  );

  forkJoin({
    styles: forkJoin(styleRequests),
    price: this._priceService.getPrice()
  }).pipe(
    map(({ styles, price }) =>
      styles.map(style => ({
        ...style,
        price
      }))
    )
  ).subscribe({
    next: styles => {
      this.garage = styles;
      console.log(this.garage);
    },
    error: error => {
      console.error('Failed to load garage data', error);
    }
  });
}

forkJoin() 适合 HttpClient 请求，因为每个请求都会在返回一次结果后完成。如果其中某个 Observable 始终不完成，forkJoin() 也不会发出最终结果。

多个订阅者共享同一次 HTTP 请求

Angular HttpClient 返回冷 Observable，每次订阅都会重新发送 HTTP 请求：

const style$ = this._APIService.getStyleByID(config.id);

style$.subscribe();
style$.subscribe(); // 会再次发送请求

如果同一个请求确实需要在多个地方订阅，可以使用 shareReplay()：

import { shareReplay } from 'rxjs/operators';

const style$ = this._APIService.getStyleByID(config.id).pipe(
  shareReplay({
    bufferSize: 1,
    refCount: true
  })
);

多个订阅者随后可以共享这次请求及其结果：

style$.subscribe(style => {
  console.log(style);
});

style$.subscribe(style => {
  console.log(style);
});

但 shareReplay() 无法解决 getStyles() 被调用两次的问题。如果每次调用 getStyles() 都会重新创建 style$，仍会产生两个独立请求。要共享请求，需要把 Observable 保存在组件属性或服务中。

排查真正的重复触发点

可以先在请求前记录调用次数和调用来源：

getStyles(configs: any[]): void {
  console.count('getStyles called');
  console.trace('getStyles call stack');

  // 后续请求逻辑
}

还要检查 ID 是否重复：

const ids = configs.map(config => config.id);

console.log('config ids:', ids);
console.log('unique ids:', new Set(ids).size);

如果业务要求每个 ID 只能请求一次，可以先去重：

const uniqueConfigs = Array.from(
  new Map(configs.map(config => [config.id, config])).values()
);

然后用 uniqueConfigs 创建请求。

还可以逐项检查 getStyles() 是否在以下位置被重复调用：

constructor 和 ngOnInit 是否都调用了它；
模板事件是否绑定了多次；
父组件和子组件是否都发起了相同加载；
路由切换是否重新创建了组件；
Observable 的多个订阅者是否分别调用了加载方法；
发起请求前是否需要执行 this.garage = []。

处理顺序很重要：先保证调用入口只有一个，再把嵌套订阅整理成一条组合链。只有在确实存在多个订阅者时，才需要使用 shareReplay() 共享 HTTP 请求。