The other day I was looking at one or two applications I’ve developed lately and also looked at some that some friends of mine created. I was looking at the usage of API calls in particular. The first thing I found out is that we are using a ridiculous amount of API calls to get things done. Of course this is not a suprise. In this era of SPA’s we are heavily relying on API calls more than ever.

No, the thing I was suprised about was that we do a lot of duplicate requests. Some pages even made multiple calls to the same endpoint at the same page. Luckily in most cases we have control over the configuration of the server as well, so if we properly configure the caching headers, everything is fine. Because when it comes to knowing the state of the data and when to invalidate, the server knows best, I believe the caching is the responsability of the server and should be taken care of by the server.

But sometimes you do not have control over the caching headers, for example when using a third party API. In those cases you do not want your application to make multiple of the same requests over and over again. Configuring the caching clientside might come in handy in those circumstances.

Caching HTTP requests clientside

Fortunately, enable caching with Angular is very easy and straightforward. To enable cache for an HTTP request you set the cache property on the $http configuration object to true.

$http.get('api/path',{
    cache: true
  }
  

Angular will now cache the HTTP response object in the default $http cache object. That object can be retrieved by using the get method on the $cachefactory and passing it $http as the first parameter.

var httpCache = $cacheFactory.get('$http');
  

Items on the $cachefactory service are stored as key-pair values. When you cache an $http request, the url specified on the $http configuration object is used as the key for the cached value. You can simply retrieve that object by calling the get method on the $httpCache and pass the url as the first parameter. The actual value that is cached, is the http response object, and so this value will be returned.

var cachedResponse = httpCache.get('api/path');
  

If you prefer to cache the response in your own cache object, you can specify that object as the cache property instead of simply specifying true.

var dataCache = $cacheFactory.get('yourApplicationCache');
  $http.get('api/path',{
    cache: dataCache
  }
  

Of course you should make sure you defined the yourApplicationCache cache somewhere else in your application. Like this:

var applicationCache = $cacheFactory.get('yourApplicationCache');
  

It’s good to know the promise returned from the $http service will be resolved with the cached reponse object. The processing of the response will behave as if the call had actually gone to the server, so you will not have to make any changes elsewhere in your application to make the caching work. Perfect.

Invalidate HTTP cache

Of course we need to invalidate the cache if the data ever changes. We do this by getting the default $http cache, and call the remove method and pass it the url we used in our $http configuration object.

var httpCache = $cacheFactory.get('$http');
  httpCache.remove('api/path');