RxJS（和Angular）：尝试缓存一次HTTP请求仍然会导致多个请求

Question

I'm still in the process of getting comfortable with RxJS, so this is potentially an easy question.

Currently I am attempting to lazily make an XHR request for some data that I only need to fetch once and then cache indefinitely while the page is open, and I think I'm on the right track by trying to leverage an AsyncSubject with the value emitted from Angular's HTTP client. What I have so far basically looks like this:

@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) { }
     ...
}

This almost works since the request isn't made until something subscribes to extraInfo$ , and .share() should prevent additional requests being made when I have more than 1 observer on it.

However, if I unsubscribe to it and extraInfo$ becomes cold (since there are 0 subscribers), subscribing to it again causes an additional request to be made again.

Right now I'm tempted to override the ._subscribe() property on an AsyncSubject so that I can run the request when it gets its first observer, but that feels a bit too hackish.

Answer 1

If you want to perform a request and then cache the result for this on any subsequent subscription, you can do this a lot easier:

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

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

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

By using shareReplay(1) you are fixing the problem you had with the share operator. They are both multicasting operators but with different properties. You want the operator to be repeatable and not retryable (checkout this article I wrote on the subject to help you http://blog.kwintenp.com/multicasting-operators-in-rxjs/ understanding what I mean).

Just remember, If you want to cache a certain observables result indefinitely, shareReplay is the one you need.

Answer 2

I came up with something eventually, the following works for what I need:

const lastFetchedInfo = new WeakMap();

@Injectable()
class AuthService {
   user$ = new BehaviorSubject(null);
   // do .switchMap() so we reset when the auth'ed user changes
   extraInfo$ = this.user$.switchMap(user => !user ? Observable.empty() : new Observable((observer) => {
     if (!lastFetchedInfo.has(user)) {
       const subject = new BehaviorSubject(null);
       lastFetchedInfo.set(user, subject.filter(o => o !== null));
       this.http.get('/api/account').subscribe(info => subject.next(info));
     }
     const subscription = lastFetchedInfo.get(user);
     return () => subscription.unsubscribe();
   }));

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

I decided to use a BehaviorSubject instead of AsyncSubject since I can expand to set intervals on refreshing the data from here if I need to.