如何等到2个$ http请求以angularjs结尾

Question

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

})

Answer 1

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()

Answer 2

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

Answer 3

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