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?

Community · Accepted Answer · 2017-05-23 10:30:59Z

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, 2017 at 10:30

CommunityBot

11 silver badge

answered Jun 25, 2013 at 0:07

GFoley83

3,5692 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Darrel Miller Over a year ago

The default no-cache headers are either an ASP.NET or a IIS thing because self-hosted Web API doesn't do that.

GFoley83 Over a year ago

Sorry @DarrelMiller not too sure what you mean. What kind of Web API are you referring to?

Darrel Miller Over a year ago

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 Over a year ago

If it is running under IIS then it's not self hosted. Self-hosted means in a Windows Console or Windows Service.

Phil Cooper Over a year ago

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!

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related