How to implement HttpCache in Angular 4?

How to Implement Http Cache using Interceptors in Angular 4?

We can use Http interceptors to implement caching.

export class CachingInterceptor implements HttpInterceptor {
  constructor(private cache: HttpCache) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Cache all GET requests and Skip other requist like POST, PUT etc.
    if (req.method !== 'GET') {
       return next.handle(req);
    // Cached Response for all exists GET requests.
    const cachedResponse = this.cache.get(req);

    //If cached response is exists.
    if (cachedResponse) {
       return Observable.of(cachedResponse);
       //If cached response is not exists.
       return next.handle(req).do(event => {
          if (event instanceof HttpResponse) {
         this.cache.put(req, event);// Update the cache.

References -
I hope you are enjoying with this post! Please share with you friends. Thank you!!

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book