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
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.
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 b y
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 Breeds.
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, lets 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 up