Posting Data with 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 Backend 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 fields 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 ip 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 ad. 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