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!!