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?

score 52 · Accepted Answer · edited May 23 '17 at 10:30

52

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:

enter image description here

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:

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):

enter image description here

With a refresh giving me a 304 Not Modified:

enter image description here

Problem solved! Hope this helps someone else.

edited May 23 '17 at 10:30

Community

1
1

answered Jun 25 '13 at 00:07

GFoley83

3,439
2
33
46

2

The default no-cache headers are either an ASP.NET or a IIS thing because self-hosted Web API doesn't do that. – Darrel Miller Jun 25 '13 at 01:13
Sorry @DarrelMiller not too sure what you mean. What kind of Web API are you referring to? – GFoley83 Jun 25 '13 at 02:08
2

Web API is a framework that sits on top of some host: Either the IIS/ASP.NET host, a WCF Self-Host or some Owin based host. The caching headers you are seeing inserted by default are being put there by the host you are using, not be web api itself. Not that it changes anything for you, just a FYI. – Darrel Miller Jun 25 '13 at 02:13
If it is running under IIS then it's not self hosted. Self-hosted means in a Windows Console or Windows Service. – Darrel Miller Jun 25 '13 at 02:50
This is great. Can anyone advise the best place to see difference and alternatives of web api to similar way to MVC? That will be great. I know they are using different runtime, but mentally i am alwaying struggling to find the corresponding feature in web api for features only available in MVC – anIBMer Oct 04 '13 at 13:17
3

Don't forget that chrome has a setting which busts the cache if developer tools are open. Not implying this is the case here but can trip you up if enabled and you're observing the network tab expecting to see your cache headers! – Phil Cooper Jun 25 '14 at 22:06

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

1 Answers1

Linked