Preview
Video Player
00:00
00:00
Posting Data with fetch()
8:18The default HTTP method for making fetch requests is GET, which retrieves data from a server. You can make requests other than GET (like POST, DELETE, and PUT) by passing additional information to fetch().
The default HTTP method for
0:00
making fetch requests is GET,
which retrieves data from a server.
0:02
But you can make requests other than GET,
like POST, DELETE,
0:06
and PUT by passing additional
information to the fetch method.
0:10
In this video, we'll create a function
that uses fetch to post the name and
0:16
comment form data to a server on submit.
0:22
Back in app.js right below the post
0:26
data comments,
I'll create a function named
0:31
postData which takes the parameter e,
for the event.
0:36
Inside the function I'll first cancel
the browser's default submit behavior,
0:42
with e.preventDefault.
0:47
Then I'll assign the value
of the name input field and
0:52
the comment textarea to
the constant name and comment.
0:58
First I'll get the name input field's
value with the document.getElementById
1:08
('name').value, and
I'll get the value of the comment textarea
1:18
with document.getElementById('comment')
.value.
1:24
I'm going to submit the contents of
the form to the JSONPlaceholder API.
1:33
This is a Fake Online REST API for
Testing and Prototyping.
1:38
I've posted the link to this
in the teacher's notes.
1:43
So you can use it for testing or
whenever you need fake data, and
1:45
I'm going to use the comment endpoint.
1:49
Which, if you click on it,
you can see it contains 500 fake comment,
1:52
and when you post to this end point
1:58
JSONPlaceholder API sends you this
submitted data back with an id attached.
2:01
Back in the postData function,
let's create our request using fetch,
2:07
now you could also used
the fetchData function for this.
2:12
But I'll go ahead and
2:16
use the fetch method, so you can see
exactly how posting data works with fetch.
2:16
I'll pass fetch the url to the comments
end point, which you can copy from
2:21
the API docs, and since I'm not using
the fetch data wrapper function here,
2:26
I'll call then to check
the status of the response.
2:32
Next, I'll chain a second then method
to parse the response to JSON.
2:40
And I'll chain a third then
method to handle the data.
2:52
For this example,
I'll log the return data to the console.
2:56
All right,
3:06
now let's wire up the form to the postData
function up in my event listeners.
3:07
I'll call addEventListener on form,
passing it the submit event and
3:13
the postData function as the callback.
3:20
Over in our app,
if you fill out the Name and
3:26
Comment fields and submit the form,
3:31
You're going to see the JSON for
all 500 comments in the console.
3:38
Well, as I mentioned earlier, the default
HTTP method for a fetch request is GET.
3:43
So we're getting all the comments
data from the JSONPlaceholder server
3:50
instead of posting our submitted data.
3:54
To send data to a server,
you use the POST method
3:58
and supply a few necessary parameters
in the body of the request.
4:03
The fetch method accepts
a second parameter,
4:10
a configuration object that lets you
control a number of different settings you
4:13
can apply to the request like
choosing a different HTTP method.
4:17
In my fetch method, after the URL,
I'll pass an object.
4:22
And in object, add three properties,
4:26
method, headers, and body.
4:31
method indicates the type of request.
4:38
So as the value for method,
I'll write POST, in all caps.
4:42
Now, even though,
the method value is case insensitive,
4:47
the fetch specs still recommends that
all methods are written in uppercase.
4:50
Next, the headers for the request
are usually contained within an object.
4:55
So inside the object,
I'll used Content-Type and
5:02
set it to application/json,
the media type for a JSON response.
5:09
This communicates to the server that
the data has been encoded with JSON.
5:18
Finally, in POST requests, values are sent
to the server in the body of the request.
5:25
So first,
the form data needs to be stringified or
5:31
transformed into a JSON string.
5:34
So as the value for body,
I'll use the JSON.stringify
5:37
method to convert the values of name and
comment into a JSON string.
5:44
So I'll pass the method in
object with the key's name
5:49
and comment, and set their values to the
variables name and comment, respectively.
5:56
Now, here's a tip, in ES 2015,
there is a shorthand notation you
6:05
can use in an object whenever a key and
value are the same.
6:10
So instead, we can shorten
the object to just name and comment.
6:14
All right, our function is all
set to post data to the server.
6:22
Over in the app,
I'll fill out the name and comment fields.
6:26
Click Submit and
6:38
the console logs an object with
the property's name and comment.
6:39
And their values are the text I submitted.
6:45
The JSON Placeholder API is sending
the submitted data back to us with an add.
6:48
It's not actually adding
this data to their servers.
6:54
But I know that the test post was
successful because it logs an id
6:56
property with the value 501.
7:01
The comments data had 500
comments initially, so
7:04
this created comment number 501.
7:08
Good, there are other
methods you can use for
7:12
fetch calls like delete to delete data,
put to update data and more.
7:15
You'll find more information about
those methods posted in the teacher's
7:21
notes with this video.
7:24
Finally, to make things
easier to manage and
7:26
read, I like to write
the config object separately.
7:29
For example,
assign the object to the variable config,
7:35
then pass the config variable
as the second argument to fetch.
7:40
All right, well done.
7:51
You just learned a new valuable
tool you'll likely use in
7:53
all your JavaScript applications.
7:57
Even when using modern
JavaScript libraries and
7:59
framework like React, and Vue.
8:02
So to practice using fetch now, why don't
you change any of your projects that use
8:05
XHR or jQuery to make async
request to the fetch API.
8:09
Thanks, everyone, and happy coding.
8:15