$q.all

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 5 years ago

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.

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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today