Orchestrating the handling of multiple promises in AngularJS is simple if you take advantage of `$q.all`. Using `$q.all` will take your promises, wait until they have all resolved and return the result of all the promises as an ordered array.

$q.all

John: In the situation where you have multiple promises, which are all going to finish at different times, like a one, a two and a three, and to make them seem asynchronous, we will set a $timeout which will end at Math.random() * 1000. That's some time between 0 and 1 second. 

Then we'll have one.resolve(), and we'll say "one done" as the message it's going to resolve. Duplicate these so we can do a two and a three, and a three. So we'll have one, two and three resolve.

Then we can have a one.promise.then. When that's done we can take the data and then just log it out.

Let's reuse this function as a then(success) function. We'll have a one.promise, a two.promise, and then a three.promise. These will all end at different times, and then I'll refresh and you can see two, one, three. Then two, three, one. One, two, three.

It's going to be random when they end, so let's figure out a way to deal with that, so we can know when they all end and when they're all done.

I've used the world "All" multiple times, because you can simply say $q.all() then pass an array of [one.promise, two.promise, three.promise]. Once all of those are done, we'll set up an "All," we'll say all.then(). We can just use our success() function here.

You can see, once I refresh now, it'll say "one, two, three," and then I'll log out all three of those messages. Or "one, three, two," and this will still say "one, two, three" so it's going to log them out in the order that you pass them in, not the order that they complete. That's a very important difference.

Once you get your data objects back, just remember which order you pass them in. For example, "one, two, three." "Three, one, two," but still "One, two, three."

This is really all that all() does is you can pass an array, and then handle all of them as a single success() function to handle multiple promises. These promises can obviously be HTTP, or any other thing that generates a promise in Angular.

$q.all

Share this video with your friends