"React Components (2018)" was retired on March 1, 2023. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Working with the Fetch API!
You have completed Working with the Fetch API!
Preview
The 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().
Code Snippets
fetch('https://jsonplaceholder.typicode.com/comments')
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up