RxJS 5 and alternatives to the cache operator

Question

Before upgrading RxJS to 5.0.0-rc.0 I was using .cache() a lot to share a subscription in my Angular application. The great advantage in using this was that any new subscription would get the last published value.

The RxJS team decided to remove it, and now I find myself manually wiring a private BehaviorSubject or ReplaySubject and then calling .asObservable() all the time. This seems like a lot of boilerplate given the easy way we had to do this before.

Am I missing some easier way? I can't find the .replay() operator, and the .share() and .publishReplay() operators don't seem to do this either.

Thanks!

martin · Accepted Answer · 2022-07-14T13:59:24.950

EDIT July 2022: The original solution worked only with now deprecated operators and was asctually based on a bug in RxJS. For an up to date solution see the updated aswer here Temporarily caching HTTP responses from parametrised requests using RxJS (and Angular).

ORIGINAL ANSWER: This is what I use to show off RxJS. The following example caches the latest mocked HTTP response for 1 second. It's based on RxJS multicasting via publishReplay() and refCount().

var counter = 1;
var updateTrigger = Observable.defer(() => mockDataFetch())
    .publishReplay(1, 1000)
    .refCount()
    .take(1);

function mockDataFetch() {
    return Observable.of(counter++)
        .delay(100);
}

function mockHttpCache() {
    return updateTrigger;
}

mockHttpCache().toPromise()
    .then(val => console.log("Response from 0:", val));

setTimeout(() => mockHttpCache().toPromise()
    .then(val => console.log("Response from 200:", val))
, 200);

setTimeout(() => mockHttpCache().toPromise()
    .then(val => console.log("Response from 1200:", val))
, 1200);

setTimeout(() => mockHttpCache().toPromise()
    .then(val => console.log("Response from 1500:", val))
, 1500);

setTimeout(() => mockHttpCache().toPromise()
    .then(val => console.log("Response from 3500:", val))
, 3500);

See live demo: https://jsbin.com/todude/3/edit?js,console

This prints to console:

Response 0: 1
Response 50: 1
Response 200: 1
Response 1200: 2
Response 1500: 2
Response 3500: 3

OK, I get my error now. I can use `publishReplay` and `refCount`, but if I don't have a subscriber I might miss/skip some of the underlying sequence values. I solved this with a call to `subscribe` immediately after, but I would imagine it's not a great solution. — Martín Coll, Dec 16 '16 at 15:37
I made a post in SO Documentation about this with detailed explanation how it works: http://stackoverflow.com/documentation/rxjs/8247/common-recipes/26490/caching-http-responses#t=201612161544428695958 — martin, Dec 16 '16 at 15:46

RxJS 5 and alternatives to the cache operator

1 Answers1