AngularJs http get cache not working

Question

Working on this app: https://billiving-qa.azurewebsites.net/spa1/#/invoices

Some http calls should be cached, but for some reason this isn't working:

 function getStatuses() {
            return $http.get('/v1/definitions/status', { cache: true })
            .then(function (response) {
                return response.data;
            })
        }

If you look in Network you'd see 'v1/definitions/status' not cached although flag is set.

Thanks

caching here refers to Angular-level caching. In other words, Angular avoids another HTTP request to the already-cached URL (URL is being used as the key). You wouldn't see that it "cached" in the network tab — New Dev
– New Dev, Commented Oct 1, 2015 at 12:37

Erik Honn · Accepted Answer · 2015-10-01 12:41:38Z

5

Actually, it is caching from what I can see.

Angular's internal cache only stashes things in memory inside the application itself, it is not the same thing as a browser-cache. Angular's cache comes into play when the application tries to request the same url multiple times, like when going back and fourth between routes. It then grabs the response from the cache instead of doing another http-request.

What it doesn't do is cache things in the browser. If you fully reload the page you also reload the application and anything it has in memory, such as Angular's internal cache. So in this case a new request is made.

If you want to have a browser level cache so that it is cached even when the page is reloaded you need to handle that with caching headers from the server, Angular has no control over that.

As an example, to cache the request for 1 hour

cache-control: public, max-age=3600

answered Oct 1, 2015 at 12:41

Erik Honn

7,5665 gold badges36 silver badges42 bronze badges

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

7 Comments

Josh Over a year ago

I don't think it is caching.. because I can see in SQL Profiler that a call is still being made down to our database. Also what you are suggesting is good for an entire page.. but I only need to cache a particular get action.

Erik Honn Over a year ago

Yes, a call is being made, the first time you load the page or when you reload the page. A call is not being made if you route back and fourth, which is the only thing angulars caching does.

Erik Honn Over a year ago

More specifically. I start by navigating to your link above and a XHR request against /status is made, this is expected since this is first load of the app. Then I navigate to the Dashboard and back to Documents again. This time no request against status is made, which is what we expect with caching.

Erik Honn Over a year ago

On a sidenote I noticed your page was really slow, then I realized you have over 1MB of javascript, after gzip! You have Kendo, Angular, Jquery, JqueryUI and Bootstrap. Now I don't know the requirement of your app, but I would be hard pressed to come up with a scenario where that does not just lead to slower code that is harder to predict.

Josh Over a year ago

Hey Erik, thanks for your response. Any other way to cache these results so that a query won't be made even after page refresh? Thank you.

|

Collectives™ on Stack Overflow

AngularJs http get cache not working

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related