Angular/rxjs使用async管道时如何传递参数并避免重复API请求

问题根源 #

你遇到的两次API请求问题本质是冷Observable的多订阅触发多次执行：

• 你定义的order$是冷Observable，每新增一个订阅就会完整执行一次内部逻辑，当前场景存在两个订阅源：
  • 模板里order$ | async的隐式订阅
  • rma$的流定义依赖order$，当rma$被订阅时会再触发一次order$的执行
• 模板中直接调用方法返回Observable的写法触发429状态码的原因是：Angular每次变更检测周期都会重新执行这个方法，每次返回新的Observable实例，async管道每次都会重新订阅发起请求，请求数会随变更检测次数线性增长，完全不可控。

最优解决方案 #

用shareReplay操作符将order$转为多订阅共享的热Observable，无需调整模板逻辑，完美匹配你「按需触发rma请求」的需求：

修改order.component.ts代码 #

import { shareReplay } from 'rxjs/operators';

// 其余代码保持不变
order$: Observable<Order> = this.route.paramMap.pipe(
   map((params: ParamMap) => +params.get('id')),
   switchMap((id: number) => 
       this.orderSvc.get(id)
   ),
   // 新增这一行，缓存1份最新结果，所有订阅共享同一份执行结果
   shareReplay(1)
);

rma$: Observable<Rma> = this.order$.pipe(
    switchMap((order: Order) => 
        this.rmaSvc.get(order.rma.id)
));

方案优势 #

1. 全程保持声明式写法，兼容OnPush变更检测策略
2. order$只会发起1次API请求，所有订阅共享结果
3. rma$只有当模板中order.status === 'Returned'条件成立、async管道订阅时才会发起RMA接口请求，完全按需触发，没有多余请求
4. 不需要提前合并流，不需要处理多余的流状态判断

额外注意事项 #

永远不要在模板的async管道前直接调用方法返回Observable，这类写法没有任何缓存机制，必然导致重复请求问题。

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