How to cache .NET Web API requests (& use w/ AngularJS $http)

Question

I have a Web API written in ASP.NET that I'm consuming via AngularJS $http.

I have enabled caching in my AngularJS factory as follows but every request still returns a response of 200, never 200 (from cache) or 304 (and by every request I mean making the same web api request numerous times on the same page, revisiting a page I've already visited that contains a Web API request, refreshing said page etc).

angular.module('mapModule')     .factory('GoogleMapService', ['$http', function ($http) {          var googleMapService = {                            getTags: function () {                 // $http returns a promise, which has a 'then' function, which also returns a promise                 return $http({ cache: true, dataType: 'json', url: '/api/map/GetTags', method: 'GET', data: '' })                 .then(function (response) {                                          return response.data;                 });             };          return googleMapService;     }]); 

Am I missing something from the AngularJS side of things? Or is this a Web API problem. Or both?

Answer 1

Turns out it was a Web API thing. I'd overlooked the fact that the response header clearly stated that caching was disabled.

Response as viewed in the Network tab of Google Chrome:

Upon further investigation (and as seen in the image above), caching is disabled in Web API controllers. Even the [OutputCache] attribute, which is used in regular MVC controllers, isn't supported.

Luckily I found this blog: http://www.strathweb.com/2012/05/output-caching-in-asp-net-web-api/

which lead me to these two solutions:

• ASP.NET Web API CacheOutput
• CacheCow

I decided to go with CacheOutput as it lets me use attributes like:

[CacheOutputUntilToday] which supports server & client side caching.

Or if I wanted to just use client-side caching I can use something like:

[CacheOutput(ClientTimeSpan = 100, ServerTimeSpan = 0)]

Which seemed a little easier at first glance that CacheCow's approach. And easier to refactor out later if need be.

Now additional requests give me a 200 (from cache):

With a refresh giving me a 304 Not Modified:

Problem solved! Hope this helps someone else.