Angular 2 : Sending requests with cache control headers

Sometimes we need to send post requests to server with cache control so that the browser does not cache the response for subsequent request.

This could lead to pretty frustrating situations with some browsers(that’s you, IE!) having strict cache control and we will see in a minute how we will wrap around the Angular’s HTTP service to tell the browser to not cache the requests.

So, in short, what we need to do is to wrap both GET and POST requests so that they are perceived as a unique every time those requests are made. It’s simple for GET requests. We just need to create a random string and attach it with GET request URL:

let timeStamp = +new Date();
uniqueUrl = url + '?tsp=' + timeStamp;
this._http.get(uniqueUrl).finally(function() {
    //Done
});

let timeStamp = +new Date();

uniqueUrl = url + '?tsp=' + timeStamp;

this._http.get(uniqueUrl).finally(function() {

//Done

});

For the POST requests, we generate special cache control headers like so:

let headersAdditional: Headers;
headersAdditional = < Headers > headers.headers;
headersAdditional.append('Cache-control', 'no-cache');
headersAdditional.append('Cache-control', 'no-store');
headersAdditional.append('Expires', '0');
headersAdditional.append('Pragma', 'no-cache');
this._http.post(url, data, {
    headers: headersAdditional
}).finally(() => {
    //Done
});