I have a page which makes http requests to the same location, just with different parameters depending on what the user wants. So my code looks something like this:
this.http.post( //I am open to POST methods or GET methods as I have security in the back to prevent malicious writes.
'http://192.168.1.45:3000/mylocation',
'p1=' + param1 + '&p2=' + param2,
{headers: headers}
)
In JQuery for example you have build into the framework a cache attribute which caches automatically and is very easy to implement:
$.ajax({
cache: true,
//other options...
});
Does Angular2 have something similar to this? I would like to cache these dynamic responses as long as the user is in the application. So if a user requests the same url with the same parameters then it would just grab it from the cache, and if the params were never yet used then it would make the network call.
I could not find anything in the Angular2 docs in the request options:
https://angular.io/docs/js/latest/api/http/RequestOptions-class.html
Cache the data, and if cached data is available return this, otherwise make the HTTP request. If you want to reuse for different requests (parameters) you can adjust to store the references in an array instead.
getData() {
if(this.data) {
// if `data` is available just return it as `Observable`
return Observable.of(this.data);
else if(this.observable) {
// if `this.observable` is set then the request is in progress
// return the `Observable` for the ongoing request
return this.observable;
} else {
// create the request, store the `Observable` for subsequent subscribers
this.observable = this.http.get('/someUrl')
.map(res => res.json())
.do(val => {
this.data = val;
// when the cached data is available we don't need the `Observable` reference anymore
this.observable = null;
})
// make it shared so more than one subscriber can get the result
.share();
return this.observable;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With