How to Wait Until 2 $Http Requests End in Angularjs

How to wait until 2 $http requests end in angularjs

check this

let promise1 = $http.get("../services/getParametres.php");
let promise2 = $http.get("../services/getParametres.php");

$q.all([promise1, promise2]).then(result=>{
 //console.log('Both promises have resolved', result);
})

How to wait for multiple request to complete in angularjs

If order is not important use $q.all() as follow:

$q.all([getData1(), getData2(), getData3()])
    .then(function(result){
        // result[0] is output of getData1() 
        // result[1] is output of getData2()
        // result[2] is output of getData3()
    });

But if order is important, call them in chain as follow:

getData1()
    .then(function(result1){
         return getData2();
    })
    .then(function(result2){
         return getData3();
    })        
   .then(function(result3){
         // your other codes
    });

Wait for all $http requests to complete in Angular JS

$http call always returns a promise which can be used with $q.all function.

var one = $http.get(...);
var two = $http.get(...);

$q.all([one, two]).then(...);

You can find more details about this behaviour in the documentation:

all(promises)

promises - An array or hash of promises.

In your case you need to create an array and push all the calls into it in the loop. This way, you can use $q.all(…) on your array the same way as in the example above:

var arr = [];

for (var a = 0; a < subs.length; ++a) {
    arr.push($http.get(url));
}

$q.all(arr).then(function (ret) {
    // ret[0] contains the response of the first call
    // ret[1] contains the second response
    // etc.
});

How to wait till the response comes from the $http request, in angularjs?

You should use promises for async operations where you don't know when it will be completed. A promise "represents an operation that hasn't completed yet, but is expected in the future." (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)

An example implementation would be like:

myApp.factory('myService', function($http) {

    var getData = function() {

        // Angular $http() and then() both return promises themselves 
        return $http({method:"GET", url:"/my/url"}).then(function(result){

            // What we return here is the data that will be accessible 
            // to us after the promise resolves
            return result.data;
        });
    };


    return { getData: getData };
});


function myFunction($scope, myService) {
    var myDataPromise = myService.getData();
    myDataPromise.then(function(result) {  

       // this is only run after getData() resolves
       $scope.data = result;
       console.log("data.name"+$scope.data.name);
    });
}

Edit: Regarding Sujoys comment that
What do I need to do so that myFuction() call won't return till .then() function finishes execution.

function myFunction($scope, myService) { 
    var myDataPromise = myService.getData(); 
    myDataPromise.then(function(result) { 
         $scope.data = result; 
         console.log("data.name"+$scope.data.name); 
    }); 
    console.log("This will get printed before data.name inside then. And I don't want that."); 
 }

Well, let's suppose the call to getData() took 10 seconds to complete. If the function didn't return anything in that time, it would effectively become normal synchronous code and would hang the browser until it completed.

With the promise returning instantly though, the browser is free to continue on with other code in the meantime. Once the promise resolves/fails, the then() call is triggered. So it makes much more sense this way, even if it might make the flow of your code a bit more complex (complexity is a common problem of async/parallel programming in general after all!)

waiting for angularJS http service to finish before starting next iteration of loop

You should store all your promises in an array and pass it to the $q.all function. You can then define multiple callbacks that are automatically called.

Here is an example.

var results = [],
    promises = [];

var promiseSuccess = function (data) {
    results.push(data);
};

var allSuccess = function (data) {
    //data contains array of all return values for promises
};

for (var i = 0; i < someArray.length; i++) {
    promises.push(httpCaller.async('myAPI').then(promiseSuccess));
}

$q.all(promises)
    .then(allSuccess) // called when everything has been loaded

Angular wait for multiple http requests to complete and then fire the last one

You should use forkJoin to achieve the desired result. forkJoin waits for all obesrvables to complete before emitting a value. Example:

forkJoin(
  this.data.getCodes('medical'),
  this.data.getCodes('delay'),
  this.data.getCodes('disability'),
  this.data.getCodes('district'),
).subscribe(([medicalData, delayData, disabilityData, districtData]) => {
  this.Medical = medicalData;
  this.Delays = delayData;
  this.Disability = disabilityData;
  this.District = districtData;

  // make your last http request here.
});

---

Related Topics