1
00:00:00,330 --> 00:00:03,760
In your projects, you'll often need
to make multiple fetch requests.

2
00:00:03,760 --> 00:00:08,220
For example, fetch a list of users,
a list of posts by user, and

3
00:00:08,220 --> 00:00:10,290
comments related to a post.

4
00:00:10,290 --> 00:00:14,367
Having to repeat the same code to make
a request, handle the response, and

5
00:00:14,367 --> 00:00:19,040
as you'll learn about later, manage
errors can get tedious and unnecessary.

6
00:00:19,040 --> 00:00:22,980
So in this video, I'll teach you how
to simplify your fetch requests by

7
00:00:22,980 --> 00:00:27,970
creating a reusable data fetching
function that runs the fetch, parses and

8
00:00:27,970 --> 00:00:30,578
returns JSON, and more, all in one place.

9
00:00:30,578 --> 00:00:33,790
First in app.js,

10
00:00:33,790 --> 00:00:39,680
I'll create a new function called
fetchData that takes the parameter url.

11
00:00:41,380 --> 00:00:45,200
This will be a wrapper
function around fetch, so

12
00:00:45,200 --> 00:00:48,340
it needs to return the fetch method.

13
00:00:48,340 --> 00:00:53,198
We'll also pass fetch,
the url parameter, and

14
00:00:53,198 --> 00:00:59,138
I'll chain a then method that
parses the response to JSON.

15
00:01:03,886 --> 00:01:08,750
So our fetchData function will
return a promise once the data is

16
00:01:08,750 --> 00:01:12,890
retrieved from the server and
parsed to JSON.

17
00:01:12,890 --> 00:01:17,863
So now, we can change our two
fetch methods below to fetchData.

18
00:01:20,487 --> 00:01:24,461
And since the data is already
being returned in JSON,

19
00:01:24,461 --> 00:01:29,420
we can delete the then methods that
handle and parse the response.

20
00:01:30,460 --> 00:01:32,262
So good, one less step to worry about.

21
00:01:34,631 --> 00:01:39,553
Now, in the next video, we're going to
chain more methods to the promise sequence

22
00:01:39,553 --> 00:01:44,340
in our fetchData function to handle
errors and check the response status.

23
00:01:44,340 --> 00:01:48,360
So you'll really start to see the benefits
of writing the fetch sequence in one place

24
00:01:48,360 --> 00:01:51,360
and reusing it anywhere
you need to fetch data.

25
00:01:51,360 --> 00:01:56,170
Now, there are other approaches you can
use to make your fetch promises modular,

26
00:01:56,170 --> 00:01:58,800
less repetitive, and easier to maintain.

27
00:01:58,800 --> 00:02:01,090
And you can have a look at them in
the teacher's notes with this video.

28
00:02:02,580 --> 00:02:08,140
Next, I'm going to create a fetch
request that uses the breed name images,

29
00:02:08,140 --> 00:02:14,270
random end point to return a random image
from the selected breed when a user clicks

30
00:02:14,270 --> 00:02:19,080
the image, or anywhere in the card div,
as you can see here in the final demo.

31
00:02:19,080 --> 00:02:23,580
And when a user selects a breed,
will also let them know they can click to

32
00:02:23,580 --> 00:02:26,961
display another random image
of the selected breed.

33
00:02:29,155 --> 00:02:36,133
So in app.js, I'll create a new
function named fetchBreedImage.

34
00:02:40,162 --> 00:02:45,108
Inside the function,
I will create a variable named breed, and

35
00:02:45,108 --> 00:02:50,480
set it to select.value, or
the value of the select element.

36
00:02:50,480 --> 00:02:52,160
Then, I'll select the image and

37
00:02:52,160 --> 00:02:56,470
paragraph element that are being
inserted into the card div.

38
00:02:56,470 --> 00:03:00,623
So first, I will select the image,

39
00:03:00,623 --> 00:03:07,835
with const image equals
card.querySelector("img").

40
00:03:07,835 --> 00:03:15,847
And below that, I'll select the paragraph
with card.querySelector("p")

41
00:03:19,666 --> 00:03:25,370
Now, I'll make a new fetch request
using my handy fetchData function.

42
00:03:26,560 --> 00:03:30,920
I'll go ahead and copy the endpoint
I need from the API docs, and

43
00:03:30,920 --> 00:03:32,820
pass it to fetchData.

44
00:03:32,820 --> 00:03:38,370
Now, instead of passing the URL as
a string, I'll use a template literal

45
00:03:38,370 --> 00:03:45,490
because I need to insert or interpolate
the value of the breed variable in my URL.

46
00:03:45,490 --> 00:03:49,596
So I'll replace the value hound with ${},
and

47
00:03:49,596 --> 00:03:53,819
inside the curly braces,
add the breed variable.

48
00:03:56,304 --> 00:04:01,605
Again, the fetchData function returns
a promise that will be resolved or

49
00:04:01,605 --> 00:04:07,460
fulfilled once the data is retrieved
from the server and parsed to JSON.

50
00:04:07,460 --> 00:04:11,050
So next, I'll chain a then
method to update the image

51
00:04:11,050 --> 00:04:13,262
to the new image returned by the API.

52
00:04:13,262 --> 00:04:19,740
So I'll pass then a function that takes
the parsed data, the other parameter data.

53
00:04:22,030 --> 00:04:27,530
And inside the function, I'll set the
image's source attribute to the returned

54
00:04:27,530 --> 00:04:33,080
URL via data.message.

55
00:04:33,080 --> 00:04:38,823
Let's also set the image's alt
text to the value of breed.

56
00:04:41,241 --> 00:04:46,267
And I'll update the paragraph's

57
00:04:46,267 --> 00:04:50,944
text content to say Click to view

58
00:04:50,944 --> 00:04:55,336
more ${breed}s.

59
00:04:58,493 --> 00:05:03,200
Again, I'm using a template literal and
interpolation here to insert

60
00:05:03,200 --> 00:05:06,971
the value of the breed variable
into the paragraph text.

61
00:05:09,479 --> 00:05:13,350
All right,
our fetch breed image function is all set.

62
00:05:13,350 --> 00:05:18,190
Now, let's wire up the select and
card elements to the new function.

63
00:05:18,190 --> 00:05:20,856
So under the event listeners comment,

64
00:05:20,856 --> 00:05:24,669
I'll first call add event
listener on the select menu.

65
00:05:28,675 --> 00:05:35,210
Passing it, the change event and the
fetchBreedImage function as the callback.

66
00:05:37,540 --> 00:05:41,410
And when the user clicks
anywhere inside the card,

67
00:05:41,410 --> 00:05:46,050
we'll also want to load another
random image of the selected breed.

68
00:05:46,050 --> 00:05:50,147
So I'm also going to call
addEventListener on card,

69
00:05:50,147 --> 00:05:55,710
this time passing it a click event and
fetchBreedImage as the call back.

70
00:05:58,334 --> 00:06:01,640
All right, let’s give our code a save and
have a look in the browser.

71
00:06:03,210 --> 00:06:09,640
I’ll refresh, and now, if I select
the Corgi option from the menu,

72
00:06:09,640 --> 00:06:12,930
it displays a Corgi image
inside the card div, and

73
00:06:12,930 --> 00:06:17,100
the text below the image says
Click to view more corgis.

74
00:06:17,100 --> 00:06:20,196
And if I click anywhere
inside the card div,

75
00:06:20,196 --> 00:06:23,890
it will load a new random
image of a corgi, perfect.