Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
JavaScript promises provide an easier, more efficient way to fire off and keep track of multiple async operations at the same time with Promise.all. In this video, you'll learn how to manage multiple fetch requests with promise.all.
Resources
Below is another way you might compose promises with fetch() and Promise.all. View the full example in this Workspace snapshot.
// store urls to fetch in an array
const urls = [
'https://dog.ceo/api/breeds/list',
'https://dog.ceo/api/breeds/image/random'
];
// use map() to perform a fetch and handle the response for each url
Promise.all(urls.map(url =>
fetch(url)
.then(checkStatus)
.then(parseJSON)
.catch(logError)
))
.then(data => {
// do something with the data
})
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In our app, we're creating and keeping
track of two separate fetch requests and
0:00
promise sequences that
occur at the same time.
0:04
When the page loads we're fetching the
list of breeds and the random breed image.
0:07
JavaScript promises provide an
easier more efficient way to fire off and
0:14
keep track of multiple async operations
concurrently or at the same time.
0:19
with the Promise.all method.
0:23
Promise.all joins two or more promises and
0:26
returns only when all the specified
promises have completed or been rejected.
0:30
Then, we determine what to do next.
0:35
For instance, we can use
Promise.all to fetch our two URLs.
0:37
Wait for
both to resolve before continuing on.
0:42
And once they're resolved, use their
results to generate the options list and
0:45
image all in one operation.
0:49
So just below the fetch data function,
I'll add the Promise.all method.
0:52
And promise.all accepts any
iterable like a string or an array.
0:58
You'll usually pass it an array
of promises, so I'll pass it an array and
1:04
inside the array I'll add
the fetchData function calls or
1:10
both the list of breeds and
the random image.
1:14
So I'll go ahead and copy them and
paste them inside the array.
1:18
So now, Promise.all is going to wait for
1:29
both fetch promises to
resolve before continuing on.
1:32
And when all the promises
passed to it have resolved,
1:38
it's going to return one promise.
1:41
So in other words, it's composing multiple
promises into a single returned promise.
1:43
So now we can call then on the new
promise by chaining a then method
1:49
to Promise.all and
then do something with the data.
1:54
So when the promise is
successfully resolved,
1:57
the return result is an array of values.
2:01
And the values are returned by
the completed promises in the same order
2:03
they were passed in.
2:08
So inside then, if I console log the
data returned by Promise.all,
2:10
what do you think is going
to log to the console?
2:20
Well let's have a look.
2:23
Notice how we get one array
containing our JSON data.
2:27
Remember, the fetch data functions
passed to Promise.all, already
2:32
handled checking the response status and
converting the response to JSON.
2:37
So the first object in the array
contains the list of breeds,
2:42
since that's what we passed
first to Promise.all, and
2:48
the second object contains the image URL.
2:52
So back in my then method, I'm going to
2:58
assign each object to a variable
using their array index.
3:03
So first, I'll assign the list of
breeds to the variable breedList
3:08
by setting it to data[0].
3:17
Followed by .message since
that's the property we
3:22
need to access from each object.
3:27
Then I'll assign the URL to the variable
3:30
random image with const randomImage
3:36
= data[1].message.
3:41
Right below the variables, I'll first call
3:45
the generateOptions function
passing it breedList.
3:50
Then I'll call generateImage.
3:56
and pass it randomImage.
4:02
Now you can go ahead and delete the two
separate fetch data sequences we wrote
4:07
earlier because it's all being
handled here with Promise.all.
4:12
[BLANK AUDIO] So as you can see this is
easier to manage, and more readable too.
4:16
Let's go ahead and save,
test it in the browser.
4:25
[BLANK AUDIO] And good,
everything still works.
4:28
Keep in mind that Promise.all is an all or
nothing operation.
4:43
Meaning, it will reject as soon as any
of the promises passed to it fail.
4:47
So, for example, if only the second
fetch data function fails,
4:52
it activates the catch method.
4:57
So, even though there's no issue
with the first fetch data function,
5:00
Promise.all rejects the promise.
5:04
So, in the console,
5:07
we see it looks like there was
a problem type error fail to fetch.
5:08
So either all of the promises succeed,
or none of them do.
5:13
Now, in this video I just wanted
to show you how Promise.all works.
5:17
In our simple app you may still
want to display a dog image,
5:21
even if fetching the list of breeds fails,
5:25
or display the select menu
options if the image fetch fails.
5:28
So writing two separate
fetch sequences is fine.
5:32
Another way you might use Promise.all
is when you have to make two or
5:37
more requests.
5:40
And you want to wait for
5:42
the application to load all the requested
data before displaying anything.
5:43
For example,
fetching a user's profile information,
5:48
then fetching other data about that user,
like a list of posts.
5:52
You can use Promise.all in your
code to coordinate the request and
5:56
proceed only if both succeed.
6:00
So there are no hard and fast rules
about when or how to use Promise.all.
6:03
How you use it is specific
to your situation.
6:09
And be sure to check the teacher's notes
to view other ways you can compose
6:11
fetch promises with Promise.all.
6:15
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up