Caching data frontend- Angular interceptors for Observable–part 48

Now I want to cache data for fast loading site- if it comes next time with the same browser,should have some data returned fast – and then load from HTTP. So first return from cache,then make the request

So I need to create an HTTP interceptor to cache things-  fortunately,Angular already provide tutorial about this: https://angular.io/guide/http#intercepting-requests-and-responses  – see CachingInterceptor. And the question is how to return 2 results ( of the same type ) from the same function  ?  Fortunately,the answer is: Observable ! ( It took me a while to figure that intercept returns Observable …). Also,when making the http request,the code should also store the result for the next time.

So I need to combine the 2 observables,one from cache and one from HTTP result  – or I can use startWith ( to start with the value).

First,I wanted to put into a static dictionary ( key: url,value: value of the request) the data. It did not work. Why ? Because of this

static cache: Map<string,any> = new Map<string,any>();

//code for finding if we have something in the case

if (CachingInterceptor.cache.has(req.url)) {

//code to put into the cache

this.cache[req.url] = event.body; // Update the cache.

Can you spot the error ? ( Yes,I know: Dictionary in C# has tricked my mind)

Last line should be this:

CachingInterceptor.cache.set(url,event.body); // Update the cache.

Now the caching works – but only for local .  And only in memory .

You can find the commit at https://github.com/ignatandrei/InfoValutar/commit/2bde8130add59c84d11d7348ad0a88bb576e356a