How to Implement Http Cache using Interceptors in Angular 4?

We can use Http interceptors to implement caching.

@Injectable()
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);
    }else{
       //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 -

https://angular.io/guide/http

https://angular.io/api/common/http/HttpClient

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