AngularJS deal with multiple promises

Question

I´m currently working on an AngularJS controller which should work with multiple promises all returning a boolean value. Based on this boolean values a resulting boolean value will be determined. If all returned values are true also the result will be true but even if only one promise returns false also the result will be false. Currently all my service/DAO calls are chained up which causes some trouble if one promise is rejected. I guess there is a better way how to handle this situation.

Controller Code:

app.controller('PromiseController', ['$scope', 'FirstService', 'SecondService', 'ThirdService', 
    'FourthService', function ($scope, FirstService, SecondService, ThirdService, FourthService) {

    var vm = this;

    vm.statusResult = false;
    vm.statusSecond = null;
    vm.statusThird = null;
    vm.statusFourth = null;
    vm.statusFirst = null;

    SecondService.getStatus()       
    .then(function(returnData){
        vm.statusSecond = returnData;
    })
    .then(function(){
        return ThirdService.getStatus();
    })
    .then(function(returnData){
        vm.statusThird = returnData;
    })
    .then(function(){
        return FourthService.getStatus();
    })
    .then(function(returnData){
        vm.statusFourth = returnData;
    })
    .then(function(){
        return FirstService.getStatus();
    })
    .then(function(returnData){
        vm.statusFirst = returnData;
    })
    .then(function(){
        if(vm.statusThird&&vm.statusFourth&&vm.statusFirst&&vm.statusSecond){
            vm.statusResult = true;
        }

    });

    return this;

}]);

So I am searching for a better way how to deal with multiple promises and how to resolve the final result of all promises. Also the app shouldn't freeze while handling the results.

EDIT

The solution with $q.all from @str works fine for the final result but I also need the individual results of all services. How am I capable to also handle the single values while also handling the final result?

$q.all or Promise.all could run all those promises in parallel then give you an array of their results. — ste2425
– ste2425, Commented Aug 5, 2016 at 7:56
i guess you can pass 2 callbacks to your then function which is success and error block. In both functions return the next promise object and save the state of rejected promise in a variable this way execution wont stop. — NiRUS
– NiRUS, Commented Aug 5, 2016 at 8:01
@str all the services are independent $http calls to the same server — JohnDizzle
– JohnDizzle, Commented Aug 5, 2016 at 8:04

str · Accepted Answer · 2016-08-05 08:24:29Z

7

You can use $q.all to wait for all promises:

var promises = [
    FirstService.getStatus(),
    SecondService.getStatus(),
    ThirdService.getStatus(),
    FourthService.getStatus(),
];

$q.all(promises)
    .then(function (serviceResults) {
        vm.serviceResults = serviceResults; // result of first promise will be available in vm.serviceResults[0] 
        vm.statusResult = serviceResults.every(function (serviceResult) {
            return serviceResult;
        });
    })
    .catch(function() {
        vm.statusResult = false;
    });

edited Aug 5, 2016 at 8:24

answered Aug 5, 2016 at 8:01

str

45.5k18 gold badges117 silver badges134 bronze badges

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

7 Comments

JohnDizzle Over a year ago

This looks very good but I have a question: If the services return the following sequence true, true, false, true won't the last true override the falsevalue due to the line vm.statusResult = serviceResults.every(function (serviceResult) { return serviceResult; });?

Olivier Boissé Over a year ago

serviceResults.every will returns false if at least one serviceResult is false. So no it will not override. every means every values should return true.

str Over a year ago

@JohnDizzle No, as oliv37 wrote. serviceResults is an array holding all the results from the promises (e.g. [true, true, false, true]). And the every function only returns true when every value is true.

Olivier Boissé Over a year ago

serviceResults is an array. So you want want the result of first promise, just call serviceResults[0], for the second one -> serviceResults[1] etc...

str Over a year ago

@JohnDizzle I extended the answer.

|

Collectives™ on Stack Overflow

AngularJS deal with multiple promises

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related