🔥 Cache every request in Angular, not only the GET, but all methods using as an interceptor, and allows you to interact with the interceptor via specific headers, that are will be not included in the request. v2020.4.291

Bugs are evident™ - MATRIX️

NodeJs LTS Version Requirement

>=12.13.0

Built on NodeJs

v12.16.3

The async and await keywords are required. Only the latest LTS variant is supported.

Install NodeJs: https://nodejs.org/en/download/package-manager/

Built on Angular

9.1.4

Description

Usually, you do not cache all requests, but only the GET method. But, some clients/companies, require to cache everything, including all methods. So, this micro-service does that.

The way, we can find out what we are caching it is not simple. Usually, you would cache by a key of the httpRequest.urlWithParams and only the GET HTTP method.

The way this package is caching the requests is implemented by the following key. To create the key, this package is using the object-hash package, with the following algorithm:

import * as hash from 'object-hash'

const hashOptions = {
  algorithm: 'md5',
  encoding: 'hex'
}

httpToKey(httpRequest: HttpRequest<any>) {
    const key = httpRequest.method + '@' + httpRequest.urlWithParams + '@' + hash(httpRequest.params, hashOptions) + '@' + hash(httpRequest.body, hashOptions)
    return key
}

There is room in the future, to restrict to specific methods and add more configurations and functions. If there is a need for this micro-service, it could be enhanced, but for now, it is caching only everything, with the exception when you include the CachingHeaders.NoCache header into your request (with any data you specify, see how it works below).

Example web page that uses this package

https://angular-http-cache-interceptor.corifeus.com

How to use it

npm i p3x-angular-http-cache-interceptor object-hash @types/object-hash

Include the caching interceptor into your Angular module

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

import { P3XHttpCacheInterceptorModule  } from 'p3x-angular-http-cache-interceptor';

@NgModule({
  declarations: [
  ],
  imports: [
    P3XHttpCacheInterceptorModule,
  ],
  providers: [
  ],
  bootstrap: []
})
export class SomeModule { }

Example invocation in a component

With and without cache:

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

import { HttpClient } from "@angular/common/http";
import {MatSnackBar} from "@angular/material/snack-bar";

import { CachingHeaders } from 'p3x-angular-http-cache-interceptor'

@Component({
  selector: 'p3x-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(
    private http: HttpClient,
    private snack: MatSnackBar,
  ) {
  }

  async loadCached() {
    try {
      const response : any = await this.http.get('https://server.patrikx3.com/api/core/util/random/32').toPromise()
      this.snack.open(`Will be always the same: ${response.random}`, 'OK')
    } catch(e) {
      this.snack.open(`Sorry, error happened, check the consle for the error`, 'OK')
      console.error(e)
    }
  }

  async loadNonCached() {
    try {
      const response : any = await this.http.get('https://server.patrikx3.com/api/core/util/random/32', {
        headers: {
          [CachingHeaders.NoCache]: '1'
        }
      }).toPromise()
      this.snack.open(`Truly random data: ${response.random}`, 'OK')
    } catch(e) {
      this.snack.open(`Sorry, error happened, check the console for the error`, 'OK')
      console.error(e)
    }
  }

}

You may refer to GitHub how it works (although the imports should be used as it is above, because the code below is using the development version):
https://github.com/patrikx3/angular-http-cache-interceptor/blob/master/src/app/app.module.ts

https://github.com/patrikx3/angular-http-cache-interceptor/blob/master/src/app/app.component.ts

https://github.com/patrikx3/angular-http-cache-interceptor/blob/master/src/app/app.component.html

🙏 This is an open-source project. Star this repository, if you like it, or even donate to maintain the servers and the development. Thank you so much!

Possible, this server, rarely, is down, please, hang on for 15-30 minutes and the server will be back up.

All my domains (patrikx3.com and corifeus.com) could have minor errors, since I am developing in my free time. However, it is usually stable.

Note about versioning: Versions are cut in Major.Minor.Patch schema. Major is always the current year. Minor is either 4 (January - June) or 10 (July - December). Patch is incremental by every build. If there is a breaking change, it should be noted in the readme.

P3X-ANGULAR-HTTP-CACHE-INTERCEPTOR Build v2020.4.291

P3X Sponsor

IntelliJ - The most intelligent Java IDE