An Angular app contains a tree of Angular components. There can be a multitude of separate different components in a single angular application page. Some times these components need real data to show probably from an API. You may choose to make API calls from a component or, better, just present data from a service which makes API calls on the trigger. In both cases, components will ask for new data and trigger an API call. In big applications with many components working together, it is common to have different components showing the same or similar data. The problem is if components trigger the same API call for the same data at the same time, this will waste your server resources tremendously.<\/p>\n\n\n\n
In my previous posts HttpClient<\/a> and HttpInterceptor<\/a> we introduced some angular concepts and see how powerful angular HTTP tools are. In this article, we will manage client-side micro caching through HTTP interceptors. We will create a simple HTTP interceptor in Angular and cut all requests to the server. When there is an API call, the interceptor saves the call as an active calls cache on the client-side and when the user requests the same URL again and active call exists, it does not go back to the server. Instead, client data is served as the same active call. This implementation ensures that there will only be one API call for the same data at any time while requiring no other change in components and services.<\/p>\n\n\n\n An Angular app contains a tree of Angular components. There can be a multitude of separate different components in a single angular application page. Some times these components need real data to show probably from an API. You may choose to make API calls from a component or, better, just present data from a service […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[22,38,4,51,46],"class_list":["post-328","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-angular","tag-api","tag-javascript","tag-rxjs","tag-typescript"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\timport { Injectable } from '@angular\/core';\nimport { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\nimport { share, finalize } from 'rxjs\/operators';\n\n@Injectable()\nexport class CacheInterceptor implements HttpInterceptor {\n private activeCalls = new Map<string, any>();\n\n intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {\n const url = req.urlWithParams;\n const method = req.method;\n const activeCall = this.calls.get(url);\n \n if (activeCall) {\n return this.activeCalls[url];\n } else {\n const call = next.handle(req).pipe(\n share(),\n finalize(() => {\n if (this.activeCalls[url]) {\n this.calls.delete(url)\n }\n }));\n if (method === 'GET') {\n this.activeCalls.set(url, call);\n }\n return call;\n }\n }\n}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"