Angular: How to make one async function executes first after another

Question

I have a save function where i need to call another function to get revision num. and there am making api call. since both are async in nature . How to make one function to make wait until other executes

$scope.getRevision = function(callback){
    Api.Product.querymyProdById({ prodId: $scope.editProdId }).$promise.then(function(result) {
        if (result && result.length>=1 && result[0].effectiveDate != $scope.editProdmyDate) {
            $scope.editProdRevision = result && result[0].revision +1;
            callback();
        } else {
            $scope.editProdRevision = 100;
        }
    });
}

$scope.saveProd = function(){
     $scope.getRevision(function(){});

     Api.Product.save({
        id: $scope.ProdId;
        revision:$scope.editProdRevision
         -some code

}

The above code i wanted to make sure save api should not get called until i get the prodRevision.

Any suggestion?

Return promises and chain them. If you return a promise in a .then it will wait for it to resolve before continuing. — ste2425
– ste2425, Commented Jun 9, 2016 at 8:54

Yury Tarabanko · Accepted Answer · 2016-06-09 08:55:39Z

5

Since you have promises do not mess with callbacks. Make your functions actually return a promise and use then to chain calls.

$scope.getRevision = function(){
    return Api.Product.querymyProdById(..).$promise...;
}

$scope.saveProd = function() {
   return $scope.getRevision().then(function() {
        return Api.Product.save(...);
   })
}

answered Jun 9, 2016 at 8:55

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

1 Comment

Markus Over a year ago

Agree, Api.Product.querymyProdById should return a promise aswell, if you are using $http or so you can directly return this one or create a custom promise with $q.

devnull69 · Accepted Answer · 2016-06-09 08:50:04Z

1

That's exactly what javascript gods invented callbacks for

$scope.saveProd = function(){
     $scope.getRevision(function(){
        // this happens after getRevision finished
        Api.Product.save({
           id: $scope.ProdId;
           revision:$scope.editProdRevision
            -saome code
        });
     });

}

answered Jun 9, 2016 at 8:50

devnull69

16.6k9 gold badges55 silver badges67 bronze badges

Comments

atefth · Accepted Answer · 2016-06-09 08:57:49Z

0

You could simple make one async call after the other, like this -

// First Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
})
.then(function successCallback(response) {
  // this callback will be called asynchronously
  // when the response is available
  // Second Simple GET request example:
   $http({
     method: 'GET',
     url: '/someUrl'
   })
   .then(function successCallback(response) {

   }, function errorCallback(response) {

   });
}, function errorCallback(response) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
});

answered Jun 9, 2016 at 8:57

atefth

1,62313 silver badges27 bronze badges

4 Comments

ste2425 Over a year ago

If you return the second $http it will flatten out the chain. Means you can register a second .then on the higher level which will wait for both AJAX requests to complete. Promises shouldn't be thought of and used like nested callbacks.

atefth Over a year ago

@ste2425 can you please explain with an example please or a link to some resource that I can read up? Thanks!

ste2425 Over a year ago

Heres a pastebin of your example. And a blog post that may help. Promises are brilliant things but are a whole other way of working vs callbacks. You can get really neat and concise data flows with them. You can nest them like you did (useful for complex chains) but this use case didn't call for it. Flattening the chain would have exactly the same effect and be more readable.

atefth Over a year ago

@ste2425 thanks for the links and you know I always smelt something fishy using them in this manner... Code smells bad now but hay, better late than never! :D

Collectives™ on Stack Overflow

Angular: How to make one async function executes first after another

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related