ngx-http-request-cache
Configurable caching of HTTP requests in Angular.
Table of contents
Demo
For a demo, download the repository, install NPM packages, then run the following commands:
npm run start:api
npm run watch:lib
npm start
The first command will start a fake API that is used to make HTTP calls to, the second will compile ngx-http-request-cache
, the third command will open a demo site that shows this working.
Installation
Install ngx-http-request-cache
via NPM, using the command below.
NPM
npm install --save ngx-http-request-cache
Getting started
Import the NgxHttpRequestModule
in your root application module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxHttpRequestModule } from 'ngx-http-request-cache';
@NgModule({
//...
imports: [
//...
NgxHttpRequestModule.forRoot()
],
//...
})
export class AppModule { }
You can either pass a personalised config into forRoot
or leave the method call empty to use the defaults. Options listed below.
Options
Option | Type | Options | Default | Use |
---|---|---|---|---|
behavior |
NgxHttpRequestBehavior |
[NgxHttpRequestBehavior.None, NgxHttpRequestBehavior.All, NgxHttpRequestBehavior.PageLevel] |
NgxHttpRequestBehavior.None |
Used to define the behavior that all HTTP requests should be sent with. |
localStorage |
boolean |
false | Whether or not to store the cached results in localStorage . If this is set then the results will only be stored until the application is reloaded, or the page is refreshed depending on the type of behavior chosen (see below). |
|
methods |
NgxHttpRequestMethod[] |
[NgxHttpRequestMethod.Delete, NgxHttpRequestMethod.Get, NgxHttpRequestMethod.Head, NgxHttpRequestMethod.Jsonp, NgxHttpRequestMethod.Options, NgxHttpRequestMethod.Patch, NgxHttpRequestMethod.Post, NgxHttpRequestMethod.Put] |
[NgxHttpRequestMethod.Get] |
The HTTP request types that should have hte default behavior applied to them. |
Behavior
-
None
- This means that no requests will be cached -
All
- This means that all requests will be cached -
PageLevel
- This means that all requests will be cached until the URL changes.
Customisation
You can also customise the behavior per request.
...
let headers = new HttpHeaders();
// Change the behavior for this request specifically
// Can choose from any of the available behaviors
headers = headers.append(NgxHttpRequestHeaders.Cache, NgxHttpRequestBehavior);
// State that the result for this particular should be stored in local storage
headers = headers.append(NgxHttpRequestHeaders.LocalStorage, 'true');
// If this header is provided then this means that any existing cached value will be replaced
headers = headers.append(NgxHttpRequestHeaders.Replace, '');
this.http.get<any[]>('http://localhost:3000/users', { headers: headers });
...
TODO
- Add timed caching
- If cache exists for a lower/higher level make it configurable to use it.