Angular模板多次使用async pipe触发重复HTTP请求如何解决

Angular HttpClient 返回的是冷（Cold）Observable，这类流的核心特性是：每新增一个独立订阅者，就会完整执行一次流内部的生产逻辑（对应当前场景就是发起一次HTTP请求）。模板中两处使用async管道等价于对historyYears$做了两次独立订阅，因此会触发重复请求。

方案1：模板层统一单次订阅（无需修改TS代码） #

使用<ng-container>作为无额外DOM渲染的父级包裹容器，仅在父容器上使用一次async管道，将流的订阅结果存为模板变量，内部两个业务区块直接复用该变量即可，全程只会触发一次订阅。
修改后的模板代码如下：

<!-- 外层容器仅做一次订阅，统一控制加载态展示 -->
<ng-container *ngIf="historyYears$ | async as historyYears; else loadingComponent">
  <div class="flex-group space-between">
    <h1>Heading</h1>
    <div>
      <aa-alert alertClass="info" alertText="You have no training history" *ngIf="historyYears.length === 0"></aa-alert>
    </div>
  </div>

  <div>
    <!-- 直接复用外层订阅得到的historyYears变量，无需再调用async管道 -->
    <!-- 其余业务代码写在这里 -->
  </div>
</ng-container>

<ng-template #loadingComponent>
  <app-loading></app-loading>
</ng-template>

该方案适合流仅在当前模板的连续区块中使用的场景，无额外RxJS操作符开销，也不会生成多余的DOM节点。

方案2：TS层对流做共享缓存（适合流多场景复用的情况） #

如果historyYears$不仅在模板多处使用，在组件TS逻辑中也需要订阅取值，可以使用RxJS的shareReplay(1)操作符包装流，将其转换为带缓存的热Observable：首次订阅时会正常执行流逻辑发起请求，后续所有订阅都会直接拿到缓存的最新值，不会重复触发流执行。
TS层代码示例：

import { shareReplay } from 'rxjs/operators';

// 组件内定义流时追加shareReplay管道
historyYears$ = this.historyService.getTrainingHistoryYears().pipe(
  shareReplay(1) // 缓存流最新发出的1个值，供后续所有订阅直接使用
);

添加该操作符后，即使模板中保留多处async管道订阅，也只会在首次订阅时发起一次HTTP请求。

提示：shareReplay(1)会在流完成后持续持有缓存值，完全适配HTTP请求这类发出一次结果后就立即完成的流场景，无需额外处理引用计数。

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