In your projects, you'll often need to make multiple fetch requests.

For example, fetch a list of users, a list of posts by user, and

comments related to a post.

Having to repeat the same code to make a request, handle the response, and

as you'll learn about later, manage errors can get tedious and unnecessary.

So in this video, I'll teach you how to simplify your fetch requests b y

creating a reusable data fetching function that runs the fetch, parses and

returns JSON, and more, all in one place.

First in app.js,

I'll create a new function called fetchData that takes the parameter url.

This will be a wrapper function around fetch, so

it needs to return the fetch method.

We'll also pass fetch, the url parameter, and

I'll chain a then method that parses the response to JSON.

So our fetchData function will return a promise once the data is

retrieved from the server and parsed to JSON.

So now, we can change our two fetch methods below to fetchData.

And since the data is already being returned in JSON,

we can delete the then methods that handle and parse the response.

So good, one less step to worry about.

Now, in the next video, we're going to chain more methods to the promise sequence

in our fetchData function to handle errors and check the response status.

So you'll really start to see the benefits of writing the fetch sequence in one place

and reusing it anywhere you need to fetch data.

Now, there are other approaches you can use to make your fetch promises modular,

less repetitive, and easier to maintain.

And you can have a look at them in the teacher's notes with this video.

Next, I'm going to create a fetch request that uses the breed name images,

random end point to return a random image from the selected breed when a user clicks

the image, or anywhere in the card div, as you can see here in the final demo.

And when a user selects a breed, will also let them know they can click to

display another random image of the selected breed.

So in app.js, I'll create a new function named fetchBreedImage.

Inside the function, I will create a variable named breed, and

set it to select.value, or the value of the select element.

Then, I'll select the image and

paragraph element that are being inserted into the card div.

So first, I will select the image,

with const image equals card.querySelector("img").

And below that, I'll select the paragraph with card.querySelector("p")

Now, I'll make a new fetch request using my handy fetchData function.

I'll go ahead and copy the endpoint I need from the API docs, and

pass it to fetchData.

Now, instead of passing the URL as a string, I'll use a template literal

because I need to insert or interpolate the value of the breed variable in my URL.

So I'll replace the value hound with ${}, and

inside the curly braces, add the breed variable.

Again, the fetchData function returns a promise that will be resolved or

fulfilled once the data is retrieved from the server and parsed to JSON.

So next, I'll chain a then method to update the image

to the new image returned by the API.

So I'll pass then a function that takes the parsed data, the other parameter data.

And inside the function, I'll set the image's source attribute to the returned

URL via data.message.

Let's also set the image's alt text to the value of breed.

And I'll update the paragraph's

text content to say Click to view

more Breeds.

Again, I'm using a template literal and interpolation here to insert

the value of the breed variable into the paragraph text.

All right, our fetch breed image function is all set.

Now, lets wire up the select and card elements to the new function.

So under the event listeners comment,

I'll first call add event listener on the select menu.

Passing it, the change event and the fetchBreedImage function as the callback.

And when the user clicks anywhere inside the card,

we'll also want to load another random image of the selected breed.

So I'm also going to call addEventListener on card,

this time passing it a click event and fetchBreedImage as the call back.

All right, let’s give our code a save and have a look in the browser.

I’ll refresh, and now, if I select the Corgi option from the menu,

it displays a Corgi image inside the card div, and

the text below the image says Click to view more corgis.

And if I click anywhere inside the card div,

it will load a new random image of a corgi, perfect.