The default HTTP method for

making fetch requests is GET, which retrieves data from a server.

But you can make requests other than GET, like POST, DELETE,

and PUT by passing additional information to the fetch method.

In this video, we'll create a function that uses fetch to post the name and

comment form data to a server on submit.

Backend app.js right below the post

data comments, I'll create a function named

postData which takes the parameter e, for the event.

Inside the function I'll first cancel the browser's default submit behavior,

with e.preventDefault.

Then I'll assign the value of the name input field and

the comment textarea to the constant name and comment.

First I'll get the name input fields value with the document.getElementById

(name).value, and I'll get the value of the comment textarea

with document.getElementById('comment') .value.

I'm going to submit the contents of the form to the JSONPlaceholder API.

This is a Fake Online REST API for Testing and Prototyping.

I've posted the link to this in the teacher's notes.

So you can use it for testing or whenever you need fake data, and

I'm going to use the comment endpoint.

Which, if you click on it, you can see it contains 500 fake comment,

and when you post to this end point

JSONPlaceholder API sends you this submitted data back with an id attached.

Back in the postData function, let's create our request using fetch,

now you could also used the fetchData function for this.

But I'll go ahead and

use the fetch method, so you can see exactly how posting data works with fetch.

I'll pass fetch the url to the comments end point, which you can copy from

the API docs, and since I'm not using the fetch data wrapper function here.

I'll call then to check the status of the response.

Next, I'll chain a second then method to parse the response to JSON.

And I'll chain a third then method to handle the data.

For this example, I'll log the return data to the console.

All right,

now let's wire up the form to the postData function ip in my event listeners.

I'll call addEventListener on form, passing it the submit event and

the postData function as the callback.

Over in our app, if you fill out the Name and

Comment fields and submit the form,

You're going to see the JSON for all 500 comments in the console.

Well, as I mentioned earlier, the default HTTP method for a fetch request is GET.

So we're getting all the comments data from the JSONPlaceholder server

instead of posting our submitted data.

To send data to a server, you use the POST method.

And supply a few necessary parameters in the body of the request.

The fetch method accepts a second parameter.

A configuration object that lets you control a number of different settings you

can apply to the request like choosing a different HTTP method.

In my fetch method, after the URL, I'll pass an object.

And in object, add three properties,

method, headers, and body.

Method indicates the type of request.

So as the value for method, I'll write POST, in all caps.

Now, even though, the method value is case insensitive,

the fetch specs still recommends that all methods are written in uppercase.

Next, the headers for the request are usually contained within an object.

So inside the object, I'll used Content-Type and

set it to application/json, the media type for a JSON response.

This communicates to the server that the data has been encoded with JSON.

Finally, in POST requests, values are sent to the server in the body of the request.

So first, the form data needs to be stringified or

transformed into a JSON string.

So as the value for body, I'll use the JSON.stringify

method to convert the values of name and comment into a JSON string.

So I'll pass the method in object with the key's name.

And comment, and set their values to the variables name and comment, respectively.

Now, here's a tip, in ES 2015, there is a shorthand notation you

can use in an object whenever a key and value are the same.

So instead, we can shorten the object to just name and comment.

All right, our function is all set to post data to the server.

Over in the app, I'll fill out the name and comment fields.

Click Submit and

the console logs an object with the property's name and comment.

And their values are the text I submitted.

The JSON Placeholder API is sending the submitted data back to us with an ad.

It's not actually adding this data to their servers.

But I know that the test post was successful because it logs an id

property with the value 501.

The comments data had 500 comments initially, so

this created comment number 501.

Good, there are other methods you can use for

fetch calls like delete to delete data, put to update data and more.

You'll find more information about those methods posted in the teacher's

notes with this video.

Finally, to make things easier to manage and

read, I like to write the config object separately.

For example, assign the object to the variable config,

then pass the config variable as the second argument to fetch.

All right, well done.

You just learned a new valuable tool you'll likely use in

all your JavaScript applications.

Even when using modern JavaScript libraries and

framework like React, and Vue.

So to practice using fetch now, why don't you change any of your projects that use

XHR or jQuery to make async request to the fetch API.

Thanks, everyone, and happy coding.