| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
🌌 Bugs are evident™ - MATRIX️
🚧 This project is under active development!
📢 We welcome your feedback and contributions.
v24.16.022.0.0
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 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.
https://angular-http-cache-interceptor.corifeus.com
npm i p3x-angular-http-cache-interceptor object-hashTwo ways to register the interceptor — standalone (recommended for new code) or NgModule (legacy, fully supported).
In your app.config.ts (or wherever you build ApplicationConfig):
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import {
p3xHttpCacheInterceptor,
provideP3xHttpCacheInterceptor,
CachingHeaders,
CachingStore,
} from 'p3x-angular-http-cache-interceptor';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(withInterceptors([p3xHttpCacheInterceptor])),
provideP3xHttpCacheInterceptor({
behavior: CachingHeaders.Cache,
store: CachingStore.Global,
}),
],
};The functional interceptor also works transparently with httpResource() — every call made through HttpClient (including httpResource) goes through the interceptor chain.
import { NgModule } from '@angular/core';
import { P3XHttpCacheInterceptorModule } from 'p3x-angular-http-cache-interceptor';
@NgModule({
imports: [
P3XHttpCacheInterceptorModule.forRoot({
behavior: CachingHeaders.Cache,
store: CachingStore.Global,
}),
],
})
export class SomeModule {}import { CachingHeaders, CachingStore } from 'p3x-angular-http-cache-interceptor';
// Opt-in: only cache when the request carries the Cache header
{
behavior: CachingHeaders.NoCache,
store: CachingStore.Global,
}
// Opt-out: cache by default, skip when the NoCache header is present
{
behavior: CachingHeaders.Cache,
store: CachingStore.PerModule, // class-based only; functional path falls back to Global
}Note on CachingStore.PerModule: the functional interceptor has no NgModule instance to own a per-module cache, so PerModule is treated as Global when using p3xHttpCacheInterceptor. The class-based HttpCacheInterceptorInterceptor still honours it via its per-instance cache.
With and without cache:
import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatSnackBar } from '@angular/material/snack-bar';
import { firstValueFrom } from 'rxjs';
import { CachingHeaders } from 'p3x-angular-http-cache-interceptor';
@Component({
selector: 'p3x-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
standalone: true,
})
export class AppComponent {
private readonly http = inject(HttpClient);
private readonly snack = inject(MatSnackBar);
async loadCached() {
try {
const response: any = await firstValueFrom(
this.http.get('https://network.corifeus.com/public/api/random/32'),
);
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 firstValueFrom(
this.http.get('https://network.corifeus.com/public/api/random/32', {
headers: { [CachingHeaders.NoCache]: '1' },
}),
);
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);
}
}
}Don't want to install anything? Try the hosted version at meeting.corifeus.com — full meeting workflow built for European businesses, no setup, no API key, no command line.
What the hosted version offers:
Try the live demo (1 minute free, no signup) or browse the public sample meeting at meeting.corifeus.com/sample.
AI-powered network & email toolkit — free, no signup.
Web · network.corifeus.com MCP · npm i -g p3x-network-mcp
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!
All my domains, including patrikx3.com, corifeus.eu, and corifeus.com, are developed in my spare time. While you may encounter minor errors, the sites are generally stable and fully functional.
Version Structure: We follow a Major.Minor.Patch versioning scheme:
🚨 Important Changes: Any breaking changes are prominently noted in the readme to keep you informed.
P3X-ANGULAR-HTTP-CACHE-INTERCEPTOR Build v2026.4.120
| Back | FazBrowse Home | New Git URL |