javascript - RxJS(和 Angular ): Attempting to cache one-time HTTP requests still causes multiple requests

Question

我仍在熟悉 RxJS 的过程中，所以这可能是一个简单的问题。

目前，我正在尝试懒惰地对一些数据发出 XHR 请求，我只需要获取一次，然后在页面打开时无限期地缓存，并且我认为通过尝试利用 AsyncSubject 带有从 Angular 的 HTTP 客户端发出的值。到目前为止我所拥有的基本上是这样的:

@Injectable()
class AuthService {
     user$ = new BehaviorSubject(null);
     // do .switchMap() so we reset when the auth'ed user changes
     extraInfo$ = this.user$.switchMap(() => {
         return this.http.get('/api/account').share();
     });

     constructor(http: HttpClient) { }
     ...
}

这几乎可以工作，因为在订阅 extraInfo$ 之前不会发出请求，并且 .share() 应该可以防止当我有超过1 名观察员。

但是，如果我取消订阅并且 extraInfo$ 变冷(因为有 0 个订阅者)，则再次订阅它会导致再次发出额外的请求。

现在我很想重写 AsyncSubject 上的 ._subscribe() 属性，以便我可以在请求获得第一个观察者时运行该请求，但是感觉有点太hackish了。

Answer 1

如果您想执行请求，然后在任何后续订阅中缓存该请求的结果，您可以更轻松地做到这一点:

@Injectable()
class AuthService {
     user$ = new BehaviorSubject(null);

     extraInfo$ = this.user$.switchMap(() => {
         return this.http.get('/api/account').shareReplay(1);
     });

     constructor(http: HttpClient) { }
     ...
}

通过使用shareReplay(1)，您可以解决使用share操作符时遇到的问题。它们都是组播运营商，但具有不同的属性。您希望操作符是可重复的且不可重试(查看我写的关于该主题的这篇文章以帮助您 http://blog.kwintenp.com/multicasting-operators-in-rxjs/ 理解我的意思)。

请记住，如果您想无限期地缓存某个可观察结果，shareReplay 就是您所需要的。