RSS Git Download  Clone
  .github r0b08x [chore] 9/5/2021, 7:09:47 PM 2 years, 9 months ago
  .vscode r0b08x [chore] 3/27/2024, 6:57:54 PM 9 weeks ago
  e2e robo8x [chore] 9/6/2020, 9:49:55 AM 3 years, 9 months ago
  projects r0b08x [chore] 7/8/2023, 12:42:03 AM 11 months ago
  src r0b08x [chore] 12/4/2023, 4:06:49 PM 6 months ago
  .eslintrc.json 1kB r0b08x [chore] 1/30/2021, 10:59:19 AM 3 years, 4 months ago
  .gitignore 879B r0b08x [chore] 11/9/2021, 4:39:22 PM 2 years, 7 months ago
  .ncurc.json 185B r0b08x [chore] 11/28/2020, 3:51:34 PM 3 years, 6 months ago
  .npmignore 185B r0b08x [chore] 7/29/2023, 4:13:21 PM 10 months ago
  Gruntfile.js 1kB r0b08x [chore] 2/16/2024, 12:27:19 PM 3 months ago
  LICENSE 1kB r0b08x [chore] 3/27/2024, 6:57:54 PM 9 weeks ago 7kB r0b08x [chore] 3/27/2024, 6:57:54 PM 9 weeks ago 3kB r0b08x [chore] 3/27/2024, 6:57:54 PM 9 weeks ago
  angular.json 5kB r0b08x [chore] 12/4/2023, 4:06:49 PM 6 months ago
  karma.conf.js 1kB robo8x [chore] 4/29/2020, 10:31:20 PM 4 years, 1 month ago
  package.json 4kB r0b08x [chore] 3/27/2024, 6:57:54 PM 9 weeks ago 210B robo8x [chore] 9/6/2020, 9:49:55 AM 3 years, 9 months ago
  tsconfig.json 796B r0b08x [chore] 7/16/2023, 4:53:20 PM 11 months ago
  tsconfig.spec.json 270B robo8x [chore] 9/6/2020, 9:49:55 AM 3 years, 9 months ago
[//]: #@corifeus-header [![NPM](]( [![Donate for Corifeus / P3X](]( [![Contact Corifeus / P3X](]( [![Corifeus @ Facebook](]( [![Uptime Robot ratio (30 days)](]( # 🔥 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 v2024.4.117 **Bugs are evident™ - MATRIX️** ### NodeJS LTS is supported ### Built on NodeJs version ```txt v20.12.0 ``` # Built on Angular ```text 17.3.1 ``` # Description [//]: #@corifeus-header:end <!-- Based on [@d4h/angular-http-cache](, but it works without any configuration and a different implementation, so they are not the same at all, but the idea is the same. --> 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: ```ts 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 # How to use it ```bash npm i p3x-angular-http-cache-interceptor object-hash ``` ## Include the caching interceptor into your Angular module ```ts import { NgModule } from '@angular/core'; import { P3XHttpCacheInterceptorModule } from 'p3x-angular-http-cache-interceptor'; @NgModule({ declarations: [ ], imports: [ P3XHttpCacheInterceptorModule, ], providers: [ ], bootstrap: [] }) export class SomeModule { } ``` ### Options ```ts 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: ```ts 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('').toPromise()`Will be always the same: ${response.random}`, 'OK') } catch(e) {`Sorry, error happened, check the console for the error`, 'OK') console.error(e) } } async loadNonCached() { try { const response : any = await this.http.get('', { headers: { [CachingHeaders.NoCache]: '1' } }).toPromise()`Truly random data: ${response.random}`, 'OK') } catch(e) {`Sorry, error happened, check the console for the error`, 'OK') console.error(e) } } } ``` [//]: #@corifeus-footer --- 🙏 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 ([]( and []( 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 v2024.4.117 [![NPM](]( [![Donate for Corifeus / P3X](]( [![Contact Corifeus / P3X](]( [![Like Corifeus @ Facebook](]( [//]: #@corifeus-footer:end