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().
making fetch requests is GET, which retrieves data from a server.
and PUT by passing additional information to the fetch method.
comment form data to a server on submit.
postData which takes the parameter e, for the event.
the comment textarea to the constant name and comment.
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.
I'm going to use the comment endpoint.
JSONPlaceholder API sends you this submitted data back with an id attached.
now you could also used the fetchData function for this.
use the fetch method, so you can see exactly how posting data works with fetch.
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.
now let's wire up the form to the postData function ip in my event listeners.
the postData function as the callback.
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.
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.
can apply to the request like choosing a different HTTP method.
In my fetch method, after the URL, I'll pass an object.
Method indicates the type of request.
So as the value for method, I'll write POST, in all caps.
the fetch specs still recommends that all methods are written in uppercase.
Next, the headers for the request are usually contained within an object.
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.
transformed into a JSON string.
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.
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.
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.
property with the value 501.
this created comment number 501.
fetch calls like delete to delete data, put to update data and more.
read, I like to write the config object separately.
then pass the config variable as the second argument to fetch.
framework like React, and Vue.
XHR or jQuery to make async request to the fetch API.
Thanks, everyone, and happy coding.