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
Infovalutar
And one hour passes...(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )
Leave a Reply