p3x-angular-http-cache-interceptor
v2024.10.103
Published
🔥 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
Downloads
121
Maintainers
Readme
🔥 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.10.103
Bugs are evident™ - MATRIX️
NodeJS LTS is supported
Built on NodeJs version
v22.3.0
Built on Angular
18.0.5
Description
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)
}
}
}
Support Our Open-Source Project ❤️
If you appreciate our work, consider starring this repository or making a donation to support server maintenance and ongoing development. Your support means the world to us—thank you!
Server Availability
Our server may occasionally be down, but please be patient. Typically, it will be back online within 15-30 minutes. We appreciate your understanding.
About My Domains
All my domains, including patrikx3.com and corifeus.com, are developed in my spare time. While you may encounter minor errors, the sites are generally stable and fully functional.
Versioning Policy
Version Structure: We follow a Major.Minor.Patch versioning scheme:
- Major: Corresponds to the current year.
- Minor: Set as 4 for releases from January to June, and 10 for July to December.
- Patch: Incremental, updated with each build.
Important Changes: Any breaking changes are prominently noted in the readme to keep you informed.
P3X-ANGULAR-HTTP-CACHE-INTERCEPTOR Build v2024.10.103