CODEWITHSUNDEEP
javascriptangularjsq
LBA
LBA

Reputation: 4089

Cannot get $q.all with nested promises working - wait for all

I fully understand that similar questions have been asked before but I don't get it running. I need a chain of promises and I need to wait until all promises are resolved.

My issue is that I need to call different promises based on the outcome of another promise :-(

So based on the outcome of promise2 my promise4 is EITHER $translate.use OR it is $translate.refresh.

This is what I have so far (simplified):

      
      var promise1 = someService.get({}).$promise.then(function (result) {
         // do stuff
      });

      var promise2 = anotherService.getPromise().then(function (result) {
        var properties = result[0];
        // do stuff
        return properties;
      });

      var promise3 = promise2.then(function(properties){

        // using $translate (angular-translate) here which is async as well

        var userLanguage = properties.language;
        if (userLanguage !== $translate.preferredLanguage()) {
          // either this is the 4th promise
          $translate.use(userLanguage).then(function (myVar) {
            // ...
          });
        } else {
          // or this is the 4th promise
          $translate.refresh().then(function (myVar) {
            // ...
          });
        }
      });

      var loadPromises = {
        promise1: promise1
        promise2: promise2
        promise3: promise3
        promise4: ???
      };

      $q.all(loadPromises).then(function (result) {
        // anything done
      });

Upvotes: 2

Views: 111

Answers (2)

pgreen2
pgreen2

Reputation: 3651

If I understand your code well enough, I think you only need to return the inner promise inside of promise3. In your example, both promise1 and promise2 won't be resolved until the service is done. Since promise3 depends on promise2 it won't finish until promise2 resolved. I believe $q.all keeps going until all promises are complete, even promises returned by promises. Since promise3 returns a promise, promise3 won't be considered resolved until the inner promise is resolved. So, I think adding a couple return statements is all that you need:

  var promise1 = someService.get({}).$promise.then(function (result) {
     // do stuff
  });

  var promise2 = anotherService.getPromise().then(function (result) {
    var properties = result[0];
    // do stuff
    return properties;
  });

  var promise3 = promise2.then(function(properties){

    // using $translate (angular-translate) here which is async as well

    var userLanguage = properties.language;
    if (userLanguage !== $translate.preferredLanguage()) {
      // either this is the 4th promise
      //NOTE: added return here
      return $translate.use(userLanguage).then(function (myVar) {
        // ...
      });
    } else {
      // or this is the 4th promise
      //NOTE: added return here
      return $translate.refresh().then(function (myVar) {
        // ...
      });
    }
  });

  var loadPromises = {
    promise1: promise1,
    promise2: promise2,
    promise3: promise3
  };

  $q.all(loadPromises).then(function (result) {
    // anything done
  });

Upvotes: 1

dfsq
dfsq

Reputation: 193261

You don't really need to monitor promise3 and promise4, all you need is promise1 and promise2. promise3 becomes next step of the promise2. Just note how you return new promise (either return $translate.use or return $translate.refresh) from promise2 then part :

var promise1 = someService.get({}).$promise.then(function(result) {
  // do stuff
});

var promise2 = anotherService.getPromise().then(function(result) {
  var properties = result[0];
  // do stuff
  return properties;
})
.then(function(properties) {

  // using $translate (angular-translate) here which is async as well

  var userLanguage = properties.language;
  if (userLanguage !== $translate.preferredLanguage()) {
    // either this is the 4th promise
    return $translate.use(userLanguage).then(function(myVar) {
      // ...
    });
  } else {
    // or this is the 4th promise
    return $translate.refresh().then(function(myVar) {
      // ...
    });
  }
});

var loadPromises = {
  promise1: promise1,
  promise2: promise2
};

$q.all(loadPromises).then(function(result) {
  // anything done
});

Upvotes: 4

Related Questions