重新调用API后如何刷新Observable以获取新数据

你现在的countDownLogout$是个冷Observable——只有第一次被async管道订阅时才会执行getCountdown()。后面在tap里用setTimeout调用的this.authenticationService.getCountdown().subscribe()是独立的订阅，和页面绑定的countDownLogout$完全无关，所以页面不会更新，原来的tap日志也不会再触发。

要让Observable能持续获取新的API数据，得把countDownLogout$改成可重复触发的类型。用Subject触发请求，配合switchMap切换新的API调用是最常用的方案：

修改后的组件代码 #

// 用Subject发送触发请求的信号
private refreshSignal = new Subject<void>();

countDownLogout$: Observable<any>;

ngOnInit() {
  this.countDownLogout$ = this.refreshSignal.pipe(
    startWith(null), // 页面加载时先触发一次请求
    switchMap(() => this.authenticationService.getCountdown()),
    tap(() => {
      console.log('calling the service');
      // 20秒后发送信号，触发下一次请求
      setTimeout(() => this.refreshSignal.next(), 20000);
    })
  );
}

ngOnDestroy() {
  // 组件销毁时清理Subject，防止内存泄漏
  this.refreshSignal.complete();
}

模板代码保持不变 #

<ng-container *ngIf="countDownLogout$ | async as countDownLogout">
  <!-- 你的页面内容 -->
</ng-container>

更简洁的固定间隔方案 #

如果就是固定每20秒刷新一次，也可以用interval简化：

countDownLogout$: Observable<any> = interval(20000).pipe(
  startWith(null), // 初始立即请求一次
  switchMap(() => this.authenticationService.getCountdown()),
  tap(() => console.log('calling the service'))
);

• 冷Observable只有订阅时才会发起新请求，用Subject的next()方法能让绑定的countDownLogout$重新订阅新的API请求。
• switchMap会在新请求发起时取消未完成的旧请求，避免旧数据干扰最新结果。
• 组件销毁时必须完成Subject，否则会造成内存泄漏。

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