How to avoid repeating http requests angularJS

Question

Is there a way in Angular to avoid repeating http requests? As you can see in the code above I'm making a call to retrieve the detailed info of a product. The fact is that this call is associated to a button... I would to avoid repetitive calls. If I have clicked on the detailed-product-button obviously I don't need to make a call again to my service....the proper way will be to load the info once and then show and hided; but I don't know how to manage this on Angular. (also I don't want to load the detail product from the scrach for very product, I want to loaded only on user's clic demand, but once)

$scope.seeInfo= function(id){

    $http.get('/shop/getDetailInfo/'+id).
        success(function(data, status) {
            $scope.info = data.detailinfo;
            if (data.detailinfo>0) $scope.showDetails=true;
            else $scope.showDetails=false;
        });

};

Pierre Lacave · Accepted Answer · 2015-07-16 14:07:43Z

5

Angular $http has a cache functionality built in, might be all you need

https://docs.angularjs.org/api/ng/service/$http

$scope.seeInfo= function(id){

    $http.get('/shop/getDetailInfo/'+id, {cache: true}).
        success(function(data, status) {
            $scope.info = data.detailinfo;
            if (data.detailinfo>0) $scope.showDetails=true;
            else $scope.showDetails=false;
        });

};

update

I see you went for the "roll your own" solution instead, which generally is more bug prone than using what angular provides.

Here how to achieve the same:

// access the $http cache 
var httpCache = $cacheFactory('$http');
// retrieve an element from cache
var detailInfo = httpCache.get('/shop/getDetailInfo/' + id);
// delete a cache element
httpCache.remove('/shop/getDetailInfo/' + id);

edited Jul 16, 2015 at 14:07

answered Jul 14, 2015 at 15:57

Pierre Lacave

2,6902 gold badges20 silver badges29 bronze badges

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

2 Comments

Frnnd Sgz Over a year ago

Fantastic! this works perfectly, thanks a lot. Now I'm wondering if my approach is correct, because I think is not very smarty to make a call every time you show hide elements..

Pierre Lacave Over a year ago

I recommend you read John's Papa best practice (github.com/johnpapa/angular-styleguide#data-services) if you want something that "feel" better

nada · Accepted Answer · 2015-07-15 11:09:39Z

2

You can store every item that the user request in a factory and then check if the content is in the factory before do the ajax call.

   $scope.seeInfo= function(id){
        var detailinfo = someFactory.get(id); //get item data from factory if exist
        if (angular.isUndefined(detailinfo) || detailinfo === null) {
            $http.get('/shop/getDetailInfo/'+id).
                success(function(data, status) {
                    someFactory.set(id, data); //set ajax data to factory
                    $scope.info = data.detailinfo;
                    if (data.detailinfo>0) $scope.showDetails=true;
                    else $scope.showDetails=false;
                });
            }
        } else {
            $scope.info = detailinfo;
            if (detailinfo>0) $scope.showDetails=true;
            else $scope.showDetails=false;
        }
    };

As well as someone said you can use the $http cache but i don't know how really it works

UPDATE

A someFactory example:

.factory('someFactory', [function() {

    var storedItems = [];

    return {
        get: function(id) {
            return storedItems[id];
        },
        set: function(id, data) {
            storedItems[id] = data;
        }
    };

}]);

test the factory:

someFactory.set(12345, {"info":"Hello"});
someFactory.set(2, "World");

console.log(someFactory.get(12345).info); // returns Hello
console.log(someFactory.get(2)); //returns World

You can store strings, objects....

Hope it helps you

UPDATE2 FULL EXAMPLE CODE

var someApp = angular.module("someApp", [])

.controller('someCtrl', ['someFactory', function(someFactory) {

  someFactory.set(12345, {"info":"Hello"});
  someFactory.set(2, "World");

  console.log(someFactory.get(12345).info); // returns Hello
  console.log(someFactory.get(2)); //returns World

}]).factory('someFactory', [function() {

    var storedItems = [];

    return {
        get: function(id) {
            return storedItems[id];
        },
        set: function(id, data) {
            storedItems[id] = data;
        }
    };

}]);

edited Jul 15, 2015 at 11:09

answered Jul 14, 2015 at 16:08

nada

9825 silver badges23 bronze badges

6 Comments

Frnnd Sgz Over a year ago

Your solution seems pretty cool, but can you provide me more info about how to declare the "someFactory" ? thanks again

Frnnd Sgz Over a year ago

you need to "attach" this factory to your controller in some way don't you? I'm getting an error but I think it's because I missed this part..sorry!

nada Over a year ago

you need to inject it (someFactory) as a dependency of your controller like $scope or $http

nada Over a year ago

@FrnndSgz see the last update with a full code example

Frnnd Sgz Over a year ago

Oooh! thanks for the full version. By the way does the $cacheFactory -provided by Angular- a similar thing? docs.angularjs.org/api/ng/service/$cacheFactory

|

changtung · Accepted Answer · 2015-07-14 17:14:14Z

1

Bind first call with scope variable.

$scope.wasCalled = false;
$scope.seeInfo= function(id){
    if ( $scope.wasCalled == false ) {
    $http.get('/shop/getDetailInfo/'+id).
        success(function(data, status) {
            $scope.info = data.detailinfo;
            $scope.wasCalled = true;
        });
    }
};

it's set on success so the server error code would be between 200 and 299. Then you can set ng-show in view basing on $scope.wasCalled variable.

Here is implementation taking into account different id calls.

$scope.callIds = [];
$scope.wasCalled = function(id){
for ( var k = 0 ; k < $scope.callIds.length ; k++ ) 
    if ( $scope.callIds[k] == id ) 
        return true;
return false;
};
$scope.addCalled = function(id){
    $scope.callIds.push(id);
};
$scope.seeInfo= function(id){
    if ( $scope.wasCalled(id) == false ) {
    $http.get('/shop/getDetailInfo/'+id).
        success(function(data, status) {
            $scope.info = data.detailinfo;
            $scope.addCalled(id);
        });
    }
};

Checking if specified id was called, if not, call with $http and add id to list.

edited Jul 14, 2015 at 17:14

answered Jul 14, 2015 at 15:59

changtung

1,6242 gold badges15 silver badges19 bronze badges

1 Comment

Shomz Over a year ago

What if you need to call it with a different id?

Collectives™ on Stack Overflow

How to avoid repeating http requests angularJS

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related