CODEWITHSUNDEEP
angularjsajaxhttp
JamesG
JamesG

Reputation: 2018

Angular JS saving information from factory AJAX request

I have a factory where I'm getting data from a server using the $http methods:

.factory('$factory', function ($q, $http, $timeout, $state, $ionicHistory, $localstorage) {
  var obj = [];

  var functions = {
    getData: function () {

      var dfd = $q.defer();
      if(!obj){
        $http({
          url: remoteUrl+'/getdata',
          method: 'POST',
          data: {}
        }).then(function(response) {
          $timeout(function(){
            obj = response.data;
            dfd.resolve(response.data);
          }, 2000)
        }, function(response) {

        }   
      }else{
        return obj;
      }
      return dfd.promise;
    }
  }
}

So this gets the data and puts it in an object. Correct me if I'm wrong, but this method of using a factory for this type of action is so it's not tied to a controller, and can be used anywhere in my application.

With this in mind, I wish to make it so I can get the data anywhere in my app without having to query the server each time. i.e. once it's queried the server the factory saves the response to an object (like I'm doing now). But I'm having trouble accessing the data afterwards in another controller for example.

I've started to make what I think it should look like by using the if(!obj) line, but in the else statement I cant seem to just return the obj object. It throws errors as it's not returning a promise like it's expected too.

I'm not sure if I'm even along the right lines with this.

Thanks

Upvotes: 1

Views: 281

Answers (2)

Bhuneshwer
Bhuneshwer

Reputation: 587

This should work: Insteada assigning obj = [] assign as a null. Usually I prefer callback. You can try this code:

.factory('$factory', function($q, $http, $timeout, $state, $ionicHistory, $localstorage) {
var obj = [];

var functions = {
    getData: function(cb) {
        // instead of checking !obj you have to check for length or you have to set obj as null
        if (obj && obj.length == 0) {
            $http({
                url: remoteUrl + '/getdata',
                method: 'POST',
                data: {}
            }).then(function(response) {
                    obj = response.data;
                    cb(response.data)
                }, function(response) {

                }
            }
            else {
                cb(obj)
            }
        }
    }
  }
 })
 // You can use callback by following code

   $factory.getData(function(response){
   // response will come here
   })

Upvotes: 1

AndrewMerrell
AndrewMerrell

Reputation: 126

You're returning a promise so you need to always return a promise even on the cached response, you can do it relatively easy at this level by wrapping it in a $q.when (https://docs.angularjs.org/api/ng/service/$q) which will return a promise immediately resolved.

return $q.when(obj);

Although $http service has built in caching, so you may want to take a look under the Cache section.

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

https://www.ng-book.com/p/Caching/

Upvotes: 2

Related Questions