1
00:00:00,410 --> 00:00:02,050
The default HTTP method for

2
00:00:02,050 --> 00:00:06,930
making fetch requests is GET,
which retrieves data from a server.

3
00:00:06,930 --> 00:00:10,860
But you can make requests other than GET,
like POST, DELETE,

4
00:00:10,860 --> 00:00:16,150
and PUT by passing additional
information to the fetch method.

5
00:00:16,150 --> 00:00:22,490
In this video, we'll create a function
that uses fetch to post the name and

6
00:00:22,490 --> 00:00:26,346
comment form data to a server on submit.

7
00:00:26,346 --> 00:00:31,140
Back in app.js right below the post

8
00:00:31,140 --> 00:00:36,650
data comments,
I'll create a function named

9
00:00:36,650 --> 00:00:41,340
postData which takes the parameter e,
for the event.

10
00:00:42,770 --> 00:00:47,320
Inside the function I'll first cancel
the browser's default submit behavior,

11
00:00:47,320 --> 00:00:52,610
with e.preventDefault.

12
00:00:52,610 --> 00:00:58,955
Then I'll assign the value
of the name input field and

13
00:00:58,955 --> 00:01:05,587
the comment textarea to
the constant name and comment.

14
00:01:08,978 --> 00:01:15,892
First I'll get the name input field's
value with the document.getElementById

15
00:01:18,209 --> 00:01:24,370
('name').value, and
I'll get the value of the comment textarea

16
00:01:24,370 --> 00:01:30,100
with document.getElementById('comment')
.value.

17
00:01:33,463 --> 00:01:38,980
I'm going to submit the contents of
the form to the JSONPlaceholder API.

18
00:01:38,980 --> 00:01:43,300
This is a Fake Online REST API for
Testing and Prototyping.

19
00:01:43,300 --> 00:01:45,560
I've posted the link to this
in the teacher's notes.

20
00:01:45,560 --> 00:01:49,640
So you can use it for testing or
whenever you need fake data, and

21
00:01:49,640 --> 00:01:52,640
I'm going to use the comment endpoint.

22
00:01:52,640 --> 00:01:58,620
Which, if you click on it,
you can see it contains 500 fake comment,

23
00:01:58,620 --> 00:02:01,040
and when you post to this end point

24
00:02:01,040 --> 00:02:05,660
JSONPlaceholder API sends you this
submitted data back with an id attached.

25
00:02:07,240 --> 00:02:12,278
Back in the postData function,
let's create our request using fetch,

26
00:02:12,278 --> 00:02:16,090
now you could also used
the fetchData function for this.

27
00:02:16,090 --> 00:02:16,900
But I'll go ahead and

28
00:02:16,900 --> 00:02:21,120
use the fetch method, so you can see
exactly how posting data works with fetch.

29
00:02:21,120 --> 00:02:26,770
I'll pass fetch the url to the comments
end point, which you can copy from

30
00:02:26,770 --> 00:02:32,890
the API docs, and since I'm not using
the fetch data wrapper function here,

31
00:02:32,890 --> 00:02:38,060
I'll call then to check
the status of the response.

32
00:02:40,460 --> 00:02:46,793
Next, I'll chain a second then method
to parse the response to JSON.

33
00:02:52,241 --> 00:02:56,710
And I'll chain a third then
method to handle the data.

34
00:02:56,710 --> 00:02:59,792
For this example,
I'll log the return data to the console.

35
00:03:06,294 --> 00:03:07,224
All right,

36
00:03:07,224 --> 00:03:13,760
now let's wire up the form to the postData
function up in my event listeners.

37
00:03:13,760 --> 00:03:20,651
I'll call addEventListener on form,
passing it the submit event and

38
00:03:20,651 --> 00:03:24,637
the postData function as the callback.

39
00:03:26,785 --> 00:03:31,582
Over in our app,
if you fill out the Name and

40
00:03:31,582 --> 00:03:35,721
Comment fields and submit the form,

41
00:03:38,160 --> 00:03:43,440
You're going to see the JSON for
all 500 comments in the console.

42
00:03:43,440 --> 00:03:50,050
Well, as I mentioned earlier, the default
HTTP method for a fetch request is GET.

43
00:03:50,050 --> 00:03:54,650
So we're getting all the comments
data from the JSONPlaceholder server

44
00:03:54,650 --> 00:03:57,040
instead of posting our submitted data.

45
00:03:58,820 --> 00:04:03,430
To send data to a server,
you use the POST method

46
00:04:03,430 --> 00:04:10,433
and supply a few necessary parameters
in the body of the request.

47
00:04:10,433 --> 00:04:13,890
The fetch method accepts
a second parameter,

48
00:04:13,890 --> 00:04:17,860
a configuration object that lets you
control a number of different settings you

49
00:04:17,860 --> 00:04:22,000
can apply to the request like
choosing a different HTTP method.

50
00:04:22,000 --> 00:04:26,770
In my fetch method, after the URL,
I'll pass an object.

51
00:04:26,770 --> 00:04:31,889
And in object, add three properties,

52
00:04:31,889 --> 00:04:35,931
method, headers, and body.

53
00:04:38,675 --> 00:04:42,610
method indicates the type of request.

54
00:04:42,610 --> 00:04:47,730
So as the value for method,
I'll write POST, in all caps.

55
00:04:47,730 --> 00:04:50,890
Now, even though,
the method value is case insensitive,

56
00:04:50,890 --> 00:04:55,730
the fetch specs still recommends that
all methods are written in uppercase.

57
00:04:55,730 --> 00:05:02,110
Next, the headers for the request
are usually contained within an object.

58
00:05:02,110 --> 00:05:09,830
So inside the object,
I'll used Content-Type and

59
00:05:09,830 --> 00:05:18,910
set it to application/json,
the media type for a JSON response.

60
00:05:18,910 --> 00:05:23,310
This communicates to the server that
the data has been encoded with JSON.

61
00:05:25,600 --> 00:05:31,565
Finally, in POST requests, values are sent
to the server in the body of the request.

62
00:05:31,565 --> 00:05:34,680
So first,
the form data needs to be stringified or

63
00:05:34,680 --> 00:05:37,690
transformed into a JSON string.

64
00:05:37,690 --> 00:05:44,260
So as the value for body,
I'll use the JSON.stringify

65
00:05:44,260 --> 00:05:49,720
method to convert the values of name and
comment into a JSON string.

66
00:05:49,720 --> 00:05:53,929
So I'll pass the method in
object with the key's name

67
00:05:56,185 --> 00:06:02,837
and comment, and set their values to the
variables name and comment, respectively.

68
00:06:05,313 --> 00:06:10,311
Now, here's a tip, in ES 2015,
there is a shorthand notation you

69
00:06:10,311 --> 00:06:14,620
can use in an object whenever a key and
value are the same.

70
00:06:14,620 --> 00:06:20,100
So instead, we can shorten
the object to just name and comment.

71
00:06:22,830 --> 00:06:26,070
All right, our function is all
set to post data to the server.

72
00:06:26,070 --> 00:06:33,904
Over in the app,
I'll fill out the name and comment fields.

73
00:06:38,265 --> 00:06:39,564
Click Submit and

74
00:06:39,564 --> 00:06:45,190
the console logs an object with
the property's name and comment.

75
00:06:45,190 --> 00:06:47,570
And their values are the text I submitted.

76
00:06:48,720 --> 00:06:54,090
The JSON Placeholder API is sending
the submitted data back to us with an add.

77
00:06:54,090 --> 00:06:56,740
It's not actually adding
this data to their servers.

78
00:06:56,740 --> 00:07:01,616
But I know that the test post was
successful because it logs an id

79
00:07:01,616 --> 00:07:04,196
property with the value 501.

80
00:07:04,196 --> 00:07:08,818
The comments data had 500
comments initially, so

81
00:07:08,818 --> 00:07:12,113
this created comment number 501.

82
00:07:12,113 --> 00:07:15,537
Good, there are other
methods you can use for

83
00:07:15,537 --> 00:07:21,090
fetch calls like delete to delete data,
put to update data and more.

84
00:07:21,090 --> 00:07:24,050
You'll find more information about
those methods posted in the teacher's

85
00:07:24,050 --> 00:07:24,870
notes with this video.

86
00:07:26,380 --> 00:07:29,690
Finally, to make things
easier to manage and

87
00:07:29,690 --> 00:07:34,590
read, I like to write
the config object separately.

88
00:07:35,830 --> 00:07:40,077
For example,
assign the object to the variable config,

89
00:07:40,077 --> 00:07:44,777
then pass the config variable
as the second argument to fetch.

90
00:07:51,663 --> 00:07:53,360
All right, well done.

91
00:07:53,360 --> 00:07:57,100
You just learned a new valuable
tool you'll likely use in

92
00:07:57,100 --> 00:07:59,380
all your JavaScript applications.

93
00:07:59,380 --> 00:08:02,240
Even when using modern
JavaScript libraries and

94
00:08:02,240 --> 00:08:05,490
framework like React, and Vue.

95
00:08:05,490 --> 00:08:09,980
So to practice using fetch now, why don't
you change any of your projects that use

96
00:08:09,980 --> 00:08:15,530
XHR or jQuery to make async
request to the fetch API.

97
00:08:15,530 --> 00:08:16,850
Thanks, everyone, and happy coding.