Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Implement Http Cache using Interceptors in Angular 4?

We can use Http interceptors to Implement caching.

@Injectable()
export class CachingInterceptor implements HttpInterceptor {
constructor(private cache: HttpCache) {}

intercept(req: HttpRequestany>, next: HttpHandler): ObservableHttpEventany>> {
// Cache all GET requests and Skip other requist like POST, PUT etc.
if (req.method !== 'GET') {
return next.handle(req);
}

// Cached Response for all exists GET requests.
const cachedResponse = this.cache.get(req);

//If cached response is exists.
if (cachedResponse) {
return Observable.of(cachedResponse);
}else{
//If cached response is not exists.
return next.handle(req).do(event => {
if (event instanceof HttpResponse) {
this.cache.put(req, event);// Update the cache.
}
});
}
}
}

References -

https://angular.io/guide/http

https://angular.io/api/common/http/HttpClient

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Share the post

How to Implement Http Cache using Interceptors in Angular 4?

×

Subscribe to Angular 2 Javascript Asp.net C# Sql Server Knockoutjs Angularjs Kendo Ui Html 5 Web Api Wpf Wcf Etc.

Get updates delivered right to your inbox!

Thank you for your subscription

×