This workshop will be retired on August 31, 2026.
Bummer! You must be logged in to access this page.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Working with the Fetch API!
You have completed Working with the Fetch API!
Preview
Learn how to simplify your fetch requests by creating a reusable data-fetching function that runs the fetch, returns the response in JSON, and more.
Code Snippets
fetchData(`https://dog.ceo/api/breed/${breed}/images/random`)
You'll often see functions created to handle different response types. For example, the parseJSON function in this Workspace snapshot.
Resources
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 your projects, you'll often need
to make multiple fetch requests.
0:00
For example, fetch a list of users,
a list of posts by user, and
0:03
comments related to a post.
0:08
Having to repeat the same code to make
a request, handle the response, and
0:10
as you'll learn about later, manage
errors can get tedious and unnecessary.
0:14
So in this video, I'll teach you how
to simplify your fetch requests by
0:19
creating a reusable data fetching
function that runs the fetch, parses and
0:22
returns JSON, and more, all in one place.
0:27
First in app.js,
0:30
I'll create a new function called
fetchData that takes the parameter url.
0:33
This will be a wrapper
function around fetch, so
0:41
it needs to return the fetch method.
0:45
We'll also pass fetch,
the url parameter, and
0:48
I'll chain a then method that
parses the response to JSON.
0:53
So our fetchData function will
return a promise once the data is
1:03
retrieved from the server and
parsed to JSON.
1:08
So now, we can change our two
fetch methods below to fetchData.
1:12
And since the data is already
being returned in JSON,
1:20
we can delete the then methods that
handle and parse the response.
1:24
So good, one less step to worry about.
1:30
Now, in the next video, we're going to
chain more methods to the promise sequence
1:34
in our fetchData function to handle
errors and check the response status.
1:39
So you'll really start to see the benefits
of writing the fetch sequence in one place
1:44
and reusing it anywhere
you need to fetch data.
1:48
Now, there are other approaches you can
use to make your fetch promises modular,
1:51
less repetitive, and easier to maintain.
1:56
And you can have a look at them in
the teacher's notes with this video.
1:58
Next, I'm going to create a fetch
request that uses the breed name images,
2:02
random end point to return a random image
from the selected breed when a user clicks
2:08
the image, or anywhere in the card div,
as you can see here in the final demo.
2:14
And when a user selects a breed,
will also let them know they can click to
2:19
display another random image
of the selected breed.
2:23
So in app.js, I'll create a new
function named fetchBreedImage.
2:29
Inside the function,
I will create a variable named breed, and
2:40
set it to select.value, or
the value of the select element.
2:45
Then, I'll select the image and
2:50
paragraph element that are being
inserted into the card div.
2:52
So first, I will select the image,
2:56
with const image equals
card.querySelector("img").
3:00
And below that, I'll select the paragraph
with card.querySelector("p")
3:07
Now, I'll make a new fetch request
using my handy fetchData function.
3:19
I'll go ahead and copy the endpoint
I need from the API docs, and
3:26
pass it to fetchData.
3:30
Now, instead of passing the URL as
a string, I'll use a template literal
3:32
because I need to insert or interpolate
the value of the breed variable in my URL.
3:38
So I'll replace the value hound with ${},
and
3:45
inside the curly braces,
add the breed variable.
3:49
Again, the fetchData function returns
a promise that will be resolved or
3:56
fulfilled once the data is retrieved
from the server and parsed to JSON.
4:01
So next, I'll chain a then
method to update the image
4:07
to the new image returned by the API.
4:11
So I'll pass then a function that takes
the parsed data, the other parameter data.
4:13
And inside the function, I'll set the
image's source attribute to the returned
4:22
URL via data.message.
4:27
Let's also set the image's alt
text to the value of breed.
4:33
And I'll update the paragraph's
4:41
text content to say Click to view
4:46
more ${breed}s.
4:50
Again, I'm using a template literal and
interpolation here to insert
4:58
the value of the breed variable
into the paragraph text.
5:03
All right,
our fetch breed image function is all set.
5:09
Now, let's wire up the select and
card elements to the new function.
5:13
So under the event listeners comment,
5:18
I'll first call add event
listener on the select menu.
5:20
Passing it, the change event and the
fetchBreedImage function as the callback.
5:28
And when the user clicks
anywhere inside the card,
5:37
we'll also want to load another
random image of the selected breed.
5:41
So I'm also going to call
addEventListener on card,
5:46
this time passing it a click event and
fetchBreedImage as the call back.
5:50
All right, let’s give our code a save and
have a look in the browser.
5:58
I’ll refresh, and now, if I select
the Corgi option from the menu,
6:03
it displays a Corgi image
inside the card div, and
6:09
the text below the image says
Click to view more corgis.
6:12
And if I click anywhere
inside the card div,
6:17
it will load a new random
image of a corgi, perfect.
6:20
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