angular, correct way for a function callback

Question

I am writing an ItemProvider for my app in angular js. I chose a service.

app.factory('ItemProvider', function($http) {
  var url = "http://localhost:7888/api.php/json?";

  return {
    get_data: function() {          
      $http.get(url).
        success(function(data,status,headers,config) {
          json = data;
          console.log("app returned ok");
          console.log(json);
          callback(json);
        }).

        error(function(data,status,headers,config) {
          console.log("Error getting data from app!");
          json = data;
          callback(json);
        });

      callback = function(json) {
        console.log("callback");
        return json;
      }
      console.log("already done");
    }
  };
});

Of course what happens here is that get_data returns immediately before the actual calls to the backend via $http returned...

How do I correctly have a get_data function which will return the data from the backend? I tried adding a callback (see code above) but I realize by the time it's getting called, get_data already finished as well...

"How do I correctly have a get_data function which will return the data from the backend?" that isn't possible. get_data will either have to accept a callback, or return a promise. — user400654
– user400654, Commented Nov 5, 2014 at 22:16

user400654 · Accepted Answer · 2014-11-05 22:19:23Z

1

$http is hardcoded to only work asynchronously, meaning your only option is to code with that in mind. Due to this, it isn't possible for get_data to directly return the data, instead, it has to either accept a callback, or return a promise. The promise route is far easier in my opinion.

app.factory('ItemProvider', function($http) {
  var url = "http://localhost:7888/api.php/json?";

  return {
    get_data: function(url) {          
      return $http.get(url);
    }
  };
});

example usage:

//...
ItemProvider.get_data('/items')
  .success(function (items) {
    console.log(items);
  })
  .error(function () {...});
//...

answered Nov 5, 2014 at 22:19

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

3 Comments

unsafe_where_true Over a year ago

I like the Promise solution! I have two providers which I will use either one or the other. I don't want to change the interface too much, so having the Promise to me looks more elegant than adding the callback.

user400654 Over a year ago

Another nice thing about the promise solution is since it's a promise, you can use .then to transform the result before returning it from the service. .then(function (result) {return transformResult(result);}). It's really nice for methods such as count, so you can return a number rather than the object with a count property that is normally returned from a rest api.

unsafe_where_true Over a year ago

indeed I will most probably need this feature as I need to filter that data! Most welcomed addition, thanks!

Collectives™ on Stack Overflow

angular, correct way for a function callback

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