Create a Reusable Fetch Function

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