Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.



    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.