Angular CLI - How to cache Http Service calls simply using rxjs

To cache simply in Angular 7 CLI, here used rxjs on HttpClient.

To cache entire country list, we can use as follows,

import { map, catchError, shareReplay } from 'rxjs/operators';

import { throwError, Observable } from 'rxjs';

…

private countryCache$ = Observable<any>;

  getCountryList() {

    if (!this.countryCache$) {

      this.countryCache$ =

        this.http.get('/api/country/getCountryList')

          .pipe(

            map(response => {

              return response;

            }),

            catchError((error, caught) => {

              return throwError(error);

            }),

            shareReplay(1)

          );

    }

    return this.countryCache$;

  }

To cache object by it's parameter we can use as follows,in this example cached country information by it's name.

private countryInfoCache$ = new Map<string, Observable<any>>();

getCountryInfo(countryName: string) {

    if (!this.countryInfoCache$.get(countryName)) {

      let countryInfoCacheResult =

        this.http.get('/api/country/getCountryInfoByName',

          { 'countryName': countryName })

          .pipe(

            map(response => {

              return response;

            }),

            catchError((error, caught) => {

              return throwError(error);

            }),

            shareReplay(1)

          );

      this.countryInfoCache$.set(countryName, countryInfoCacheResult);

    }

    return this.countryInfoCache$.get(countryName);

  }