Angular $http cache not working

Question

I am trying to use angular's http cache but the result is undefined. Cache returns an object but usersCache is undefined.

controller in main.js

app.controller('exploreController', function($scope, dataService, $cookies, $cacheFactory, $http) {
// dataService.explorePosts();

$scope.explore = function(){
    dataService.explorePosts();
    var cache = $cacheFactory.get('$http');
    console.log(cache);
    var usersCache = cache.get('http://dstm.herokuapp.com/api/explore');
    console.log(usersCache);

};

$scope.explore();
});

service in data.js

angular.module('dsnApp')
.service('dataService', function($http, $cookies, $cacheFactory) {  
   this.explorePosts = function(){
    var id = $cookies.get("userId");
    $http.get('http://dstm.herokuapp.com/api/explore', {cache: true,
     params: {userId: id, page: 1},
   })
   .then(function successCallback(response) {
    console.log(response);
  }, function errorCallback(response) {
    console.log(response);
  });
};

controller('exploreController', ['$scope', '$cacheFactory', function($scope, dataService, $cookies, $cacheFactory, $http) { — MACMAN
– MACMAN, Commented Jan 2, 2017 at 3:41
$http is asynchronous.Nothing will be cached until the request completes and you are trying to access the cache synchronously — charlietfl
– charlietfl, Commented Jan 2, 2017 at 3:45

Ruslan Stelmachenko · Accepted Answer · 2017-01-02 04:04:50Z

1

@charlietfl is right.

$http is asynchronous.Nothing will be cached until the request completes and you are trying to access the cache synchronously.

To make this work as you expect:

First, make the this.explorePosts function return the promise, which $http service alredy returns.

   this.explorePosts = function(){
     var id = $cookies.get("userId");
     return $http.get('http://dstm.herokuapp.com/api/explore', {cache: true,
       params: {userId: id, page: 1},
     })
     .then(function successCallback(response) {
       console.log(response);
     }, function errorCallback(response) {
       console.log(response);
     });
   };

Then use the cache in the promise's then callback.

$scope.explore = function() {
    dataService.explorePosts().then(function () {
        var cache = $cacheFactory.get('$http');
        console.log(cache);
        var usersCache = cache.get('http://dstm.herokuapp.com/api/explore');
        console.log(usersCache);
    });
};

answered Jan 2, 2017 at 4:04

Ruslan Stelmachenko

5,4982 gold badges42 silver badges54 bronze badges

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

3 Comments

charlietfl Over a year ago

Actually don't really even need the cachefactory. If the then() in service was removed then() in controller would always see the response object but only one request would ever be made due to the cache config

Ruslan Stelmachenko Over a year ago

This is right, but i think the OP just want to explore the cache for the educational purposes.

charlietfl Over a year ago

Right, was just mentioning it as OP may not be aware either

Collectives™ on Stack Overflow

Angular $http cache not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related