Async set variable using a promise and avoiding callbacks

Question

In Angular (and other JavaScript frameworks), data from an http request is retrieved async using a promise and can be set to a variable using a callback. Simple enough. But I'm getting tired of writing code that looks like this:

service.getWidgetsAsync(function (result) { vm.widgets = result.data });

Is there any way that I haven't thought of to write the above more like this....?

vm.widgets = service.getWidgetsAsync();

"No" is probably a valid answer. :-)

(Example of the getWidgetsAsync added to clarify: )

function getWidgetsAsync(callback) {
    $http.get(APPBASEURL + 'Foo/GetWidgets')
        .then(function(result) {
            callback(result);
        });
}

I don't see any promises in your example. A callback function is basically the antithesis of a promise. — JLRishe
– JLRishe, Commented Oct 2, 2014 at 18:02
My understanding is 'getWidgetsAsync' is the promise, with a callback being passed into it. — RJB
– RJB, Commented Oct 2, 2014 at 18:03
Are you conflating "promise" with "asynchronous function"? Promises have a .then() method. You don't call them directly as functions. Could you name an actual API that you're using instead of a fake name like "getWidgetsAsync"? Then we can find out if it has anything to do with promises. — JLRishe
– JLRishe, Commented Oct 2, 2014 at 18:05
If you want to use async, you need a callback that runs when it's done. Whether you inline that callback or use a promise is up to you, but it has to be one or the other. — Blazemonger
– Blazemonger, Commented Oct 2, 2014 at 18:06

JLRishe · Accepted Answer · 2014-10-02 18:11:41Z

2

The problem is that you are defeating the whole point of promises by involving callbacks. Return the promise instead of using it to call a callback:

function getWidgetsAsync() {
    return $http.get(APPBASEURL + 'Foo/GetWidgets');
}

Then you can write code like this:

service.getWidgetsAsync()
.then(function (result) {
    vm.widgets = result.data;
    // do more stuff with vm.widgets
})
.then(/* do other things after the function above is done */);

The answer to your question is no, you can't use the result of an asynchronous operation immediately after you call it. If you could, it wouldn't be asynchronous.

answered Oct 2, 2014 at 18:11

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

1 Comment

RJB Over a year ago

Not sure why I hadn't thought to return/expose the promise from the $http.get.... This was helpful, thanks!

Jason Goemaat · Accepted Answer · 2014-10-02 18:15:06Z

Yes and no... You can use angular $resource which will initially populate the variable with an empty object and fill in the details when it gets the results so your code will look like you want, but the values aren't filled in until the call completes so you can't immediately assume you have data.

angular.module('MyApp')
    .factory('WidgetResource', ['$resource', function ($resource) {
        return $resource('/api/widgets',
          { 
            'get':    {method:'GET'},
            'save':   {method:'POST'},
            'query':  {method:'GET', isArray:true},
            'remove': {method:'DELETE'},
            'delete': {method:'DELETE'}
          });
    }]);

Then in your controller:

var vm.widgets = WidgetResource.query();

Any bindings or watches you do will fire when the data is received. For instance if you have a list of widgets in an ng-repeat they will show up when the ajax call completes, but if you check the length of the widgets array immediately after the line above in your code it will be zero.

Collectives™ on Stack Overflow

Async set variable using a promise and avoiding callbacks

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related