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 调用的响应将被缓存在一个名为“cache”的全局变量中。

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

所以我想在 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)
    });
}