1 00:00:02,300 --> 00:00:06,480 Now let's make sure we can also send a post request, 2 00:00:06,590 --> 00:00:14,420 so a request that adds data on the server. For that here, I'll add a new function, async function create 3 00:00:14,660 --> 00:00:17,810 post or however you want to name it and there 4 00:00:17,810 --> 00:00:25,100 let's say I expect to get a title and the content of the post and then here I'll have the post ID 5 00:00:25,130 --> 00:00:30,090 which I'll generate with math random, just a random number 6 00:00:30,380 --> 00:00:33,380 and now overall I have the post object here 7 00:00:33,380 --> 00:00:40,760 you could say, where we have a title of title, where we have a body because our API here actually wants 8 00:00:40,820 --> 00:00:49,930 a body field, it wants that we send it a title, a body field and a userId, so actually this here should 9 00:00:49,930 --> 00:00:51,400 be userId, sorry, 10 00:00:51,910 --> 00:00:59,470 so userId, then title body should be the content argument we're getting and then userId and make 11 00:00:59,470 --> 00:01:02,280 sure you write it exactly as the API expects it, 12 00:01:02,290 --> 00:01:11,190 so with a capital I, that can be equal to a hardcoded value or to the userId I set up there. 13 00:01:11,190 --> 00:01:14,010 So this could now be the post data we send to the server, 14 00:01:14,010 --> 00:01:17,820 the question just is, how do we now send this? 15 00:01:17,850 --> 00:01:26,880 Well we can reuse our sendHttpRequest function which we created up here and now the URL is actually 16 00:01:26,880 --> 00:01:33,740 the same as before, the server we're talking to supports this URL, you can see that in the examples 17 00:01:33,750 --> 00:01:34,350 here as well, 18 00:01:34,350 --> 00:01:39,550 this is a URL we can send a post request to but the method is a different one, 19 00:01:39,580 --> 00:01:45,760 the method now is post. By the way, it does not matter if this is all uppercase or if you write it like 20 00:01:45,760 --> 00:01:49,400 this, the convention is to use all uppercase but it's not required 21 00:01:49,420 --> 00:01:54,720 technically. The URL is the same URL as before 22 00:01:54,850 --> 00:02:01,360 and now we will actually need to enhance this method because now, we need to be able to also add a body 23 00:02:01,570 --> 00:02:03,700 to the request . For a get request, 24 00:02:03,700 --> 00:02:09,340 you don't need that you just want to get data so you don't append any extra data to the outgoing request, 25 00:02:09,910 --> 00:02:16,150 for a post request where you want to create data on the server, you need to add the data you want to 26 00:02:16,150 --> 00:02:23,050 create to the outgoing request and to do that, we need to tweak our function, the sendHttpRequest 27 00:02:23,050 --> 00:02:31,330 function to also expect a data argument or to support it at least. By default this can be null or it 28 00:02:31,330 --> 00:02:36,580 actually is undefined by default anyways if we don't pass it so we don't need to set this up and now 29 00:02:36,580 --> 00:02:43,040 we can append this to the outgoing request. To append data to the outgoing request, you go to the send 30 00:02:43,060 --> 00:02:49,090 method and pass your data to send, however not just like this but it needs to be JSON data, so we should 31 00:02:49,090 --> 00:02:56,890 call JSON.stringify and pass data to JSON.stringify and then pass the result of this stringify 32 00:02:56,890 --> 00:03:09,050 call to send, so this will now add this extra data here. With that, we can call create post here 33 00:03:09,080 --> 00:03:16,970 after fetching the posts and create a dummy post with a dummy post as content maybe and just dummy as 34 00:03:16,970 --> 00:03:22,970 a title and now we just have to make sure that in create post, we use that post object which we created 35 00:03:23,120 --> 00:03:25,790 and add that to the request we're sending. 36 00:03:25,850 --> 00:03:32,240 So here as the third argument which we just added to the sendHttpRequest method, we can add post and 37 00:03:32,270 --> 00:03:38,570 inside of the sendHttpRequest method, this will be converted to JSON and attached to the outgoing request. 38 00:03:39,440 --> 00:03:45,050 With that if we save that and we reload our page here, we don't get an error, 39 00:03:45,070 --> 00:03:50,690 let's check the network tab and there we see this extra request down there. Now the status codes here 40 00:03:50,690 --> 00:03:53,370 by the way signal whether it worked or not, 41 00:03:53,370 --> 00:03:56,600 200ish status codes mean that 42 00:03:56,600 --> 00:04:03,350 the request succeded, 201 means that it succeeded and a resource was created on the server and 43 00:04:03,350 --> 00:04:08,900 therefore this is looking good, though keep in mind no actual resources are getting created here, we're 44 00:04:08,900 --> 00:04:15,560 talking to a dummy API which just fakes that it does something. Nonetheless if we inspect this, we see 45 00:04:15,650 --> 00:04:16,540 a response, 46 00:04:16,580 --> 00:04:22,280 this could be an ID which the server automatically generated for our send data and on the headers 47 00:04:22,280 --> 00:04:28,940 tab, we see our URL, our HTTP method and if we scroll to the very bottom, we see the request payload 48 00:04:29,150 --> 00:04:34,690 and that's the data which was appended and here we see that indeed is the data we generated. 49 00:04:34,760 --> 00:04:40,740 So this is how we can send a request with JSON data to an API, 50 00:04:41,060 --> 00:04:43,330 it's as easy as that. 51 00:04:43,340 --> 00:04:47,810 Now let's tweak our little project here a little bit and let's make sure we actually send the data which 52 00:04:47,810 --> 00:04:52,880 the user entered and we also only send it when we click add or we fetch it when we click fetch.