Angular - 多次订阅而不触发多次调用？

Question

我有一个服务调用，它的响应缓存在我的 Angular 服务中，如下所示：

public cacheMyServiceResponse(): Observable<any> {
  return this.appConfig.getEndpoint('myService')
    .pipe(
      switchMap((endpoint: Endpoint) => this.http.get(endpoint.toUrl())),
      tap((body: any) => {
        if (body) { //  this endpoint can also return a 204 (No Content), where body is null
          this.cache = body.myData;
        }
      }),
      take(1),
      catchError(error => {
        this.errorService.trackError(error.status);
        return of(true);
      })
    );
}

所以我的 http.get 调用的响应将被缓存在这里，在一个名为“缓存”的全局变量中。

问题是，这个调用可能真的响应很晚，所以我们想在页面加载时（初始化时）立即调用这个端点。但是实际的响应，或者我们的调用是否完成（成功或错误），我们只在用户点击按钮时才需要这些信息。当然，在按钮点击的那一刻，响应可能还没有，并且在这种情况我想等一下。（所以我需要的不仅仅是一个简单的布尔标志）

所以我想像这样在 ngOnInit 中初始化这个调用：

ngOnInit() {
    this.myService.cacheMyServiceResponse().subscribe();
}

但是在其他地方，我需要知道它是否已经完成了调用，而无需两次触发我的 http 调用。

onClick() {
    this.myService.cacheMyServiceResponse().subscribe(() => {
       // call is finished..
    });
}

目前该服务将被调用两次。我怎样才能做到这一点？

PS：我没有故意进行错误处理，我只需要知道服务调用是否完成。

Answer 1

我建议使用ReplaySubject()并订阅ReplaySubject()onClick ，它会等待您的服务发出数据，同时它仍然可以订阅，如果在服务发出数据之前没有订阅它，您不会错过数据：

yourWaitingData = new ReplaySubject();
subscription;

ngOnInit() {
    this.myService.cacheMyServiceResponse().subscribe(res => {
        //yourWaitingData only emit when res is return from API call
        this.yourWaitingData.next(res)
    });
}

然后订阅它：

onClick() {
    if(this.subscription){
       this.subscription.unsubscribe()
    }
    this.subscription = this.yourWaitingData.subscribe((x) => {
       // subscribed and will wait for data to be emited from service
       console.log(x)
    });
}