javascript - How to wait until 2 $http requests end in angularjs - Stack Overflow

I need to process responses of two different $http requests. What is the best way to do so, knowing that I have to wait for answers of both request before to process their results. I think I must use something like async, promise, await features, but I cannot figure out how to do so.

var app = angular.module('Async', []);
app.controller('async', function($scope, $http, $timeout, $interval) {

    $scope.getCamionTypes = function() {
        $http.get("../services/getCamionTypes.php")
        .then(function mySucces(response) {
            $scope.camionTypes = response.data;
        }, function myError(response) {
            camionTypes = [];
        });
    } ;

    $scope.getParametres = function() {
        var b = $http.get("../services/getParametres.php")
        .then(function mySucces(response) {
            $scope.parametres = response.data;
        }, function myError(response) {
            $scope.parametres = [];
        });
    }

    //I make here the first call
    $scope.getCamionTypes();

    //I make here the second call
    $scope.getParametres();

    //The following instruction must wait for the end of the 2 calls
    console.log('Types de camion : ' + $scope.camionTypes + '\n' + 'Parametres : ' + $scope.parametres);

})

I need to process responses of two different $http requests. What is the best way to do so, knowing that I have to wait for answers of both request before to process their results. I think I must use something like async, promise, await features, but I cannot figure out how to do so.

var app = angular.module('Async', []);
app.controller('async', function($scope, $http, $timeout, $interval) {

    $scope.getCamionTypes = function() {
        $http.get("../services/getCamionTypes.php")
        .then(function mySucces(response) {
            $scope.camionTypes = response.data;
        }, function myError(response) {
            camionTypes = [];
        });
    } ;

    $scope.getParametres = function() {
        var b = $http.get("../services/getParametres.php")
        .then(function mySucces(response) {
            $scope.parametres = response.data;
        }, function myError(response) {
            $scope.parametres = [];
        });
    }

    //I make here the first call
    $scope.getCamionTypes();

    //I make here the second call
    $scope.getParametres();

    //The following instruction must wait for the end of the 2 calls
    console.log('Types de camion : ' + $scope.camionTypes + '\n' + 'Parametres : ' + $scope.parametres);

})

• javascript
• angularjs
• promise
• angular-promise

Share Improve this question Follow edited Sep 25, 2018 at 21:59 Luiz Carlos 24622 silver badges88 bronze badges asked Sep 25, 2018 at 15:51 AntoineFeAntoineFe 3311 silver badge99 bronze badges 2

• 1 1. return both promises and populate an array, e.g. array = [promise1, promise2]. 2. use $q.all(array) to resolve both promises at the same time with .then() – Aleksey Solovey Commented Sep 25, 2018 at 15:55
• 1 @AlekseySolovey Technically .then() doesn't resolve the promises, it is simply a handler that gets called for when the promises have been resolved, but your answer is correct. – mhodges Commented Sep 25, 2018 at 15:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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);
})

Use Promise.all for such use cases. Promise.all takes an array of promises and gets resolved when both the promises are resolved. It will fail if any of the promises fail.

$scope.getCamionTypes = function() {
    return $http.get("../services/getCamionTypes.php")
} ;

$scope.getParametres = function() {
    return $http.get("../services/getParametres.php")
}

Promise.all([$scope.getCamionTypes(), $scope.getParametres()]).then(resp => {
//resp[0] and resp[1] will contain data from two calls.
//do all your stuff here
}).catch()

Thank you very much Samira and Shubham for your usefull help ! Here the code modified thank to your advises with the less impact on the architecture of my application. Best regards.

var app = angular.module('Async', []);
app.controller('async', function($scope, $http, $timeout, $interval, $q) {

    $scope.getCamionTypes = function() {
        let promise = $http.get("https://www.alphox.fr/ModulPierres_dev/services/getCamionTypes.php")
        promise.then(function mySucces(response) {
            $scope.camionTypes = response.data;
        }, function myError(response) {
            camionTypes = [];
        });
        return promise;
    } ;

    $scope.getParametres = function() {
        let promise = $http.get("https://www.alphox.fr/ModulPierres_dev/services/getParametres.php")
        promise.then(function mySucces(response) {
            $scope.parametres = response.data;
        }, function myError(response) {
            $scope.parametres = [];
        });
        return promise;
    }

    //I make here the first call
    let promise1 = $scope.getCamionTypes();

    //I make here the second call
    let promise2 = $scope.getParametres();


    $q.all([promise1, promise2]).then (result=>{
        //The following instructions wait for the end of the 2 calls
        console.log('Types de camion : '); 
        console.log($scope.camionTypes);
        console.log('Parametres : ');
        console.log($scope.parametres);
        $scope.both = {camionTypes: $scope.camionTypes, parametres: $scope.parametres}
    });
});