This post is about an experimental approach and I am sure there are other approaches for solving a similar problem. If so, please comment on this article. Demo: https://ashwin-sureshkumar.github.io/angular-cache-service-blog/ Note: open the developer console to see log messages Github Repo: https://github.com/ashwin-sureshkumar/angular-cache-service-blog Stackblitz Editor: https://stackblitz.com/edit/angular-simple-cache-service-with-rxjs What is Cache in our context ? Cache is a simple data storage to store data so that it can be accessed faster the next time the same info is needed to improve performance and user experience. Here, the data can be a derived/calculated value or duplicate data/requests made from different sections of the application. What are the requirements for our Cache Service ? An Injectable Cache Service Ability to set an expiration for each item. An Observable based service Ability to track in-flight requests so duplicate requests are never made. What are we implementing to use this Cache Service? We are going to build a simple list of stories from Hackernews API to show the top stories from their homepage and implement infinite scroll to load more data. To make things interesting, I want to show the of the author for each post but Karma is not returned in the stories API call. It has to be fetched for each user with a separate API call. So as we load the list, we will pick the author and make an API call to populate the karma of the user. So if incase the same user is repeated in the list, we will end up making multiple calls without any kind of caching service. Karma Note: This is a made up scenario to demonstrate the usage of a cache service. We will see cache service code, the demo of the implementation and then break the code into sections for a walk through. In the above gif I am logging the API calls (purple), notifying the inflight observables (blue) and when the data is received from cache (green). Demo: https://ashwin-sureshkumar.github.io/angular-cache-service-blog/ Note: open the dev console to log messages Breaking it down ! We initialize three properties to our service, A Map for holding our cached data with a given key A Map for holding a subject for our inflight observables Default max age for cache data. Let’s look at method get method does few things, get If the requested key exists in the cache, then return the cached data If there is an existing in flight request, then return the subject for that key If there is a fallback provided, then set the inFlight subject and return the callback with a side effect ( ) method chain which calls the set method. do Finally throw an error The method is pretty straight forward, set the given the data in cache and notifies all the subscribers with data. set check if key exists in inFlightObservables and if there are subscribers for the key. notifyInFlightObservers How to use the Cache Service? It is very straight forward, I am calling the with (key for the cache) and as the API call here and thats it. cacheService.get id fallback This is a simple implementation of a caching service on the UI layer. Hope this brings in some thoughts and other implementation ideas. If you liked this post, please share, comment and recommend. Related Articles Angular — Simple Infinite scroller directive with RxJS Observables: https://codeburst.io/angular-2-simple-infinite-scroller-directive-with-rxjs-observables-a989b12d4fb1 Naive Infinite scroll in Reactive Programming using RxJS Observables https://hackernoon.com/naive-infinite-scroll-in-reactive-programming-using-rxjs-observables-4a605d3146e8

Chain

RxJS — Reduce Angular app bundle size using lettable operators

Naive Infinite scroll in Reactive Programming using RxJS Observables

Too Long; Didn't Read

Make resilience your competitive advantage

Angular — Simple In Memory Cache Service with RxJS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Angular2 -HackerNews clone Firebase setup with observables — Realtime

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Angular2 -HackerNews clone Firebase setup with observables — Realtime

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps