AngularJs :How to execute the functions in a synchronous fashion

Question

How to execute three services in a synchronous way in AngularJS? I have three $http.get() services and on its success have to read the JSON fields and if the particular set of fields have valid data,a flag has to be set to true/false and depending on the flag result the next service will be called otherwise not.But here, the services are running asynchronously so my logic is failing.

Sample Code:
  // Condition 1
if(item === false) {
            var product = Service1.get().then(function (response) {

                    // Logic for reading the JSON

                        // Setting the flag based on it..
                        item = true/false;
                    }




           //Condition 2
            if(item === false) {
                var call = Service2.get().then(function (data) {
                       // Logic for reading the JSON

                        // Setting the flag based on it..
                        item = true/false;
                    }
            }

            // Condition 3
        if(item === false) {
            var product = Service3.get().then(function (response) {

                    // Logic for reading the JSON

                        // Setting the flag based on it..
                        item = true/false;
                    }
        }
    }   



 Here, the problem is that code in *Condition3* is getting executed first then code in *Condition1* and *Condition2* which is causing the unexpected results.
It would be of great help if someone has the sample code in which three services are executed in a sequential manner.

You are using `Promise`; take a look at this question; it might help you http://stackoverflow.com/questions/21759361/wait-for-all-promises-to-resolve. Most of you code is invalid and not runnable. If you want to do it in a sync'ed manner you could put the entire thing in the first `then()` method — TryingToImprove, Sep 01 '15 at 08:53

score 1 · Answer 1 · answered Sep 01 '15 at 09:08

Instead of executing a new $http request in the success handler and write cascades of requests, perhaps you can solve it in a recursive way:

function recursiveHttp(array) {
   $http(array[0].config).then(function() {
       array[0].success();
       recursiveHttp(array.splice(0,1));
    }, function() {
       array[0].error();
       recursiveHttp(array); //beware:  no escape clause
    });
}

Where the array is a collection of objects that contain the required config object and two callback functions.

{
   config :  {
    method: 'get',
    url: 'myurl'
   },
   success: function() {
       //do stuff
   },  
   error: function() {
      //do stuff
   }
}

score 0 · Answer 2 · answered Sep 01 '15 at 09:12

There are 2 ways to achieve what you want (as far as i can make out from your question):

change the behavior of $http.get to async by using async : true.
chain your requests properly so that one executes only after the other, so that each has their dependencies met before they start executing. this ca be done by calling the dependent function on the callback of the first one.

AngularJs :How to execute the functions in a synchronous fashion

2 Answers2