p3x Breeze
Uptime Robot ratio (30 days)      
v2024.4.114
 4

🔥 Cache every request in Angular, not only the GET, but all methods of this interceptor, and allows you to interact with the interceptor via specific headers and modify the request, and these specific headers will be not included in the final request

Built on Angular v17.2.4

Usually, when you want to cache all requests, you do not cache all requests, but only the GET method. But, for some frontend applications, it is required to cache everything, otherwise the subsequent requests, without cache, would slow down the application flow. So, this micro-service caches all method/path/query variables/parameters/request body.

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.

To create this cache 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 everything, with the exception, when you include the CachingHeaders.NoCache header into your request, then this request will always hit the server.

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

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 { }

Options 

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

P3XHttpCacheInterceptorModule.forRoot({
    // default request is no cache
    behavior: CachingHeaders.NoCache,
    
    // if a request has CachingHeaders.Cache header it will cache globally
    store: CachingStore.Global,
})

P3XHttpCacheInterceptorModule.forRoot({
    // default request is cache
    behavior: CachingHeaders.Cache,

    // in this config, it will cache not globally, but per module
    store: CachingStore.PerModule,
})

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 console 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)
    }
  }

}
onenoteGithub onenoteredis-uiGithub redis-uiangular-compileGithub angular-compilegitlistGithub gitlistramdiskGithub ramdiskfreenomGithub freenomopenwrt-insomniaGithub openwrt-insomniaredis-ui-serverGithub redis-ui-serversystemd-managerGithub systemd-managerxml2jsonGithub xml2jsoncorifeusGithub corifeusredis-ui-materialGithub redis-ui-materialangular-http-cache-interceptorGithub angular-http-cache-interceptorhtml-pdfGithub html-pdfverdaccio-cliGithub verdaccio-clibinary-search-closestGithub binary-search-closestcorifeus-builderGithub corifeus-buildercorifeus-app-web-pagesGithub corifeus-app-web-pagescorifeus-utilsGithub corifeus-utilsgrunt-p3x-expressGithub grunt-p3x-expressjson2xls-worker-threadGithub json2xls-worker-threadtoolsGithub tools