1
00:00:02,340 --> 00:00:07,980
In order to be able to create a post, we need to make sure that this function can succeed and for that,

2
00:00:08,010 --> 00:00:14,550
we need to make sure that we use the HTTP method in the fetch API and also the data, the body that

3
00:00:14,550 --> 00:00:16,800
should be appended to the outgoing request.

4
00:00:16,800 --> 00:00:22,830
Right now, we always just send a fetch request to a URL and therefore we always send a get request.

5
00:00:22,830 --> 00:00:27,640
Now just as with XMLHttpRequest, we can configure the outgoing request,

6
00:00:27,660 --> 00:00:34,500
however unlike XMLHttpRequest, you don't pass the request method here directly as an argument to

7
00:00:34,500 --> 00:00:36,330
the fetch function here,

8
00:00:36,360 --> 00:00:42,060
instead you can pass a second parameter here, a second argument which should be an object where you can

9
00:00:42,060 --> 00:00:47,850
configure the request and there you've got a couple of keys you can set as you see, a lot of them are

10
00:00:47,850 --> 00:00:52,190
pretty niche and rarely need it but method is one of the more important ones.

11
00:00:52,410 --> 00:00:58,920
Method should be set to a string and by default, it's set to get so you'll never need to set this but

12
00:00:58,920 --> 00:01:04,130
you can but you always need to set it to post, put, patch, delete and so on

13
00:01:04,140 --> 00:01:06,460
if you plan on sending such a request.

14
00:01:06,690 --> 00:01:14,070
So here I'll set it to method pointing at the parameter I'm getting here in send HttpRequest and forwarding

15
00:01:14,070 --> 00:01:18,880
my parameter value as a value to this key-value pair here.

16
00:01:19,080 --> 00:01:20,840
So that will set the method,

17
00:01:20,850 --> 00:01:25,760
now you can also set the body and that has to be set to JSON data.

18
00:01:26,090 --> 00:01:33,420
So not just data like this, data would be my third argument here but instead, to data converted to JSON

19
00:01:33,930 --> 00:01:43,670
which we can do with JSON.stringify around data. If we now do that and we reload and try to enter

20
00:01:43,670 --> 00:01:45,060
a new post,

21
00:01:45,170 --> 00:01:49,460
does this work? Let's see if it works if I now click add.

22
00:01:49,670 --> 00:01:56,200
So if I clicked add, we go to the network tab, we see this is the post request we just send,

23
00:01:56,200 --> 00:01:58,130
status code 201

24
00:01:58,380 --> 00:01:59,430
and indeed here,

25
00:01:59,520 --> 00:02:01,430
that's the body we appended.

26
00:02:01,470 --> 00:02:10,350
So here we can see, yes this worked, this request successfully was sent now with help of the fetch API.

27
00:02:10,350 --> 00:02:15,650
Now let's also check if deleting works, if I fetch posts and I click delete,

28
00:02:15,660 --> 00:02:22,200
let's say on the second post, then a request is sent here to the post with id 2, the delete request has

29
00:02:22,200 --> 00:02:24,390
a 200 code so that seems to work.

30
00:02:24,510 --> 00:02:30,540
Now before we have a look at how we handle errors here, let's have a look at how we can add headers to

31
00:02:30,540 --> 00:02:36,120
HttpRequests, not just with the fetch API but also with XMLHttpRequest.