How to cache HTTP requests in Angular

Question

Can you tell me How to cache HTTP requests in Angular

Answer 1

In Angular, you can cache HTTP requests using RxJS operators and Interceptor.

Use an HTTP Interceptor

1. Create an Interceptor:

import { Injectable } from '@angular/core';

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable, of } from 'rxjs';

import { tap, shareReplay } from 'rxjs/operators';

@Injectable()

export class CacheInterceptor implements HttpInterceptor {

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

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (req.method !== 'GET') {

      return next.handle(req); 

    }

    const cachedResponse = this.cache.get(req.url);

    if (cachedResponse) {

      return of(cachedResponse); 

    }

    return next.handle(req).pipe(

      tap(event => this.cache.set(req.url, event)),

      shareReplay(1) 

    );

  }

}

2.Register the Interceptor in `app.module.ts`:

import { HTTP_INTERCEPTORS } from '@angular/common/http';

providers: [

  { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }

]