1
00:00:00,390 --> 00:00:03,770
To code along with me, launch
the workspace with this video or download

2
00:00:03,770 --> 00:00:07,460
the project files for this workshop and
open them in your favorite text editor.

3
00:00:07,460 --> 00:00:08,700
When you open the project files or

4
00:00:08,700 --> 00:00:13,660
workspace, you should see
an index.html file and a js

5
00:00:13,660 --> 00:00:18,780
folder containing a file named app.js,
the two main files we'll be working with.

6
00:00:18,780 --> 00:00:24,770
When you preview index.html in the browser
you'll see an empty select menu and

7
00:00:24,770 --> 00:00:27,698
div container, and
below them a simple form.

8
00:00:27,698 --> 00:00:32,602
Over in app.js,
there are three pre-written variables.

9
00:00:32,602 --> 00:00:39,480
It's selecting elements from index.html
like the select menu, card div and form.

10
00:00:39,480 --> 00:00:41,790
We're going to be working with these
elements throughout the workshop.

11
00:00:42,970 --> 00:00:48,130
So the fetch API provides an easier way to
make network requests in the browser and

12
00:00:48,130 --> 00:00:49,520
handle responses.

13
00:00:49,520 --> 00:00:52,960
To make a request,
you use the global fetch method.

14
00:00:52,960 --> 00:00:55,400
Fetch takes one mandatory argument.

15
00:00:55,400 --> 00:00:57,280
The path to the resource
you want to fetch.

16
00:00:58,410 --> 00:01:03,940
I'm going to request data from
the Dog API at dog.ceo/dog-api.

17
00:01:03,940 --> 00:01:07,680
This simple API returns
a list of dog breeds and

18
00:01:07,680 --> 00:01:11,230
random images of dogs either by breed or
all breeds.

19
00:01:11,230 --> 00:01:16,220
Now many APIs require an API key to let
you connect to their web server and

20
00:01:16,220 --> 00:01:17,240
access data.

21
00:01:17,240 --> 00:01:22,010
To keep things simple I chose a public
API that does not require an API key.

22
00:01:22,010 --> 00:01:26,740
And here you can see all the different
endpoints like all dogs by breed,

23
00:01:26,740 --> 00:01:28,740
by sub breed and so on.

24
00:01:28,740 --> 00:01:33,880
So first, I'm going to return
data from the All dogs endpoint.

25
00:01:33,880 --> 00:01:39,570
And I want this endpoint that returns
a random dog image from all the breeds.

26
00:01:39,570 --> 00:01:46,379
So I can click this JSON link and
copy this URL in the address bar.

27
00:01:46,379 --> 00:01:50,726
Over in app.js under
the fetch functions comment,

28
00:01:50,726 --> 00:01:56,963
I'll first type the fetch method, and
pass it the URL to fetch as a string.

29
00:02:01,192 --> 00:02:05,584
As I mentioned in the previous video,
Fetch API uses JavaScript promises to

30
00:02:05,584 --> 00:02:08,410
handle the results
returned from the server.

31
00:02:08,410 --> 00:02:12,723
Again, be sure to watch our workshop on
JavaScript promises if you're not sure how

32
00:02:12,723 --> 00:02:13,595
promises work.

33
00:02:13,595 --> 00:02:18,413
A promise represents the eventual
result of an asynchronous operation.

34
00:02:18,413 --> 00:02:22,825
Similar to callbacks, promises allow
us to wait on certain code to finish

35
00:02:22,825 --> 00:02:27,735
execution before running the next bit of
code in a cleaner, more readable way.

36
00:02:27,735 --> 00:02:31,535
Now the fetch method
itself returns a promise.

37
00:02:31,535 --> 00:02:37,564
So for example, if I copy this fetch
method and run it in my browser's console.

38
00:02:39,270 --> 00:02:42,670
Notice how it returns a promise object.

39
00:02:42,670 --> 00:02:49,160
And if I click the arrow to expand it, we
see that the promise status is resolved.

40
00:02:49,160 --> 00:02:52,475
That means the asynchronous task
was completed successfully.

41
00:02:52,475 --> 00:02:55,685
The promise was fulfilled because
the browser received a response from

42
00:02:55,685 --> 00:02:56,755
the server.

43
00:02:56,755 --> 00:02:59,985
Now nothing's happened yet
in our app because we haven't written

44
00:02:59,985 --> 00:03:03,225
any code to handle the response and
the return data.

45
00:03:03,225 --> 00:03:06,055
We'll do that now using
a sequence of promises.

46
00:03:06,055 --> 00:03:08,885
Promises get executed in sequence.

47
00:03:08,885 --> 00:03:13,980
You chain then methods to the fetch method
which returns a promise of their own.

48
00:03:13,980 --> 00:03:18,890
The methods get executed sequentially
once the previous promise is fulfilled.

49
00:03:18,890 --> 00:03:23,090
In other words, something happens
after something else is resolved.

50
00:03:23,090 --> 00:03:26,675
So in our case,
the fetch promise is fulfilled or

51
00:03:26,675 --> 00:03:30,355
resolved when the browser receives
the response from the server.

52
00:03:30,355 --> 00:03:33,982
So, next I'll chain a then
method to fetch and

53
00:03:33,982 --> 00:03:39,376
pass it a function using an error
function that takes the response via

54
00:03:39,376 --> 00:03:44,600
a parameter I'll call response and
logs it to the console for now.

55
00:03:49,637 --> 00:03:53,781
Remember you're able to place the chain
then methods on separate lines to make

56
00:03:53,781 --> 00:03:55,800
your code easier to read.

57
00:03:55,800 --> 00:04:00,890
Now, this isn't immediately going
to return the data we expect.

58
00:04:00,890 --> 00:04:05,740
You see once the data finishes loading and
a fetch promise is fulfilled,

59
00:04:05,740 --> 00:04:10,380
fetch returns a response object containing
information about the response,

60
00:04:10,380 --> 00:04:15,000
like the status code and
the corresponding status message.

61
00:04:15,000 --> 00:04:18,440
So here, the response lets us know
that the request went through.

62
00:04:19,630 --> 00:04:24,870
The actual data we want is in the body
property of the response object.

63
00:04:24,870 --> 00:04:28,330
Now the API we're using
returns data in JSON.

64
00:04:28,330 --> 00:04:33,810
So in order to access and use the data,
we need to parse it to JSON first.

65
00:04:33,810 --> 00:04:39,270
So I'll change the function
to return the raw data

66
00:04:39,270 --> 00:04:45,254
in the response in JSON
format using response.json.

67
00:04:45,254 --> 00:04:48,294
There are different methods you
can use on a response object.

68
00:04:48,294 --> 00:04:52,601
Each lets you handle different
response types, for example,

69
00:04:52,601 --> 00:04:56,160
blob for images, text for
text files and more.

70
00:04:56,160 --> 00:04:59,810
I posted examples of some of the other
common methods in the teacher's notes.

71
00:05:01,230 --> 00:05:08,770
So, response.json reads the response and
returns a promise that resolves to json.

72
00:05:08,770 --> 00:05:12,270
And because we're using
a single line arrow function,

73
00:05:12,270 --> 00:05:15,850
the promise returned from
the response.json() method call

74
00:05:15,850 --> 00:05:19,820
will be implicitly returned
from our arrow function.

75
00:05:19,820 --> 00:05:22,440
And this allows us to chain another

76
00:05:22,440 --> 00:05:25,810
then method() onto our
existing then() method call.

77
00:05:25,810 --> 00:05:30,130
So inside this method is where we
can do something with the json data.

78
00:05:30,130 --> 00:05:34,230
For example, iterate over it, and
insert it into our page's content.

79
00:05:34,230 --> 00:05:40,572
So in the second then method, I'll pass
a function that takes the json data,

80
00:05:40,572 --> 00:05:46,153
via a parameter I'll call data, and
logs it to the console for now.

81
00:05:48,295 --> 00:05:51,950
Let's go back to our console, refresh.

82
00:05:51,950 --> 00:05:55,141
And great,
now we're getting the actual JSON data.

83
00:05:55,141 --> 00:05:59,540
In the JSON object there's
a property named message, and

84
00:05:59,540 --> 00:06:01,974
the value is the URL to an image.

85
00:06:01,974 --> 00:06:09,382
So to access the value of
message I'll log data.message.

86
00:06:12,978 --> 00:06:18,800
Refresh the page, and this is exactly
what we need, the URL as a string.

87
00:06:18,800 --> 00:06:24,470
And just like that with three short and
simple methods, we have our data.

88
00:06:24,470 --> 00:06:25,290
Now, as you can see,

89
00:06:25,290 --> 00:06:30,400
each time I refresh the page,
the endpoint returns a different URL.

90
00:06:30,400 --> 00:06:34,970
And now, we can use this URL in an image
element source attribute to display

91
00:06:34,970 --> 00:06:35,690
a random dog image.

92
00:06:35,690 --> 00:06:38,350
And we'll do just that in the next video.

93
00:06:38,350 --> 00:06:41,750
Keep in mind that by default,
fetch won't send or

94
00:06:41,750 --> 00:06:43,950
receive any cookies from the server.

95
00:06:43,950 --> 00:06:47,220
And this will affect you in dealing
with the user authentication.

96
00:06:47,220 --> 00:06:51,095
So the fetch method also accepts
an optional second parameter,

97
00:06:51,095 --> 00:06:56,400
an init options object you can use
to customize the HTTP request.

98
00:06:56,400 --> 00:07:00,375
So for example you can send a request
with credentials included, or

99
00:07:00,375 --> 00:07:04,415
make a post request instead
of the default get request.

100
00:07:04,415 --> 00:07:08,795
And you'll learn more about this in the
final video when we post data to a server

101
00:07:08,795 --> 00:07:09,815
using fetch.

102
00:07:09,815 --> 00:07:12,897
For now you can read more about it in
the teacher's notes with this video.