1
00:00:02,300 --> 00:00:07,510
Of course it's nice that we're able to get data but often we also want to send data,

2
00:00:07,580 --> 00:00:13,790
for example here we have our form and when I click add here, right now the form gets submitted and hence

3
00:00:13,790 --> 00:00:18,920
the page gets reload because the browser does its default thing and sends a request automatically to

4
00:00:18,920 --> 00:00:22,710
some server, the same server where the HTML page is hosted on

5
00:00:22,880 --> 00:00:28,870
and that's not the behavior I want. I want to send a request to this JSONPlaceholder page because

6
00:00:28,880 --> 00:00:34,760
that if we click on guide does not just support getting resources or listing all resources,

7
00:00:34,850 --> 00:00:40,940
it also allows us to create a resource by sending a post request and therefore that's what I want to

8
00:00:40,940 --> 00:00:42,200
do here.

9
00:00:42,200 --> 00:00:47,420
Now for that, we should restructure our code here a little bit,

10
00:00:47,420 --> 00:00:52,590
we could of course also improve it a lot by for example using object oriented code,

11
00:00:52,610 --> 00:01:00,590
I'll just tweak it a little bit by wrapping this HttpRequest sending logic into a separate reusable

12
00:01:00,590 --> 00:01:01,300
function.

13
00:01:02,230 --> 00:01:09,520
I'll create a function, sendHttpRequest for example which wants a method and a URL let's say

14
00:01:09,820 --> 00:01:21,190
for now and in there, we have all that code, so let's cut it and move it in there and now replace get here

15
00:01:21,490 --> 00:01:22,410
with methods,

16
00:01:22,420 --> 00:01:29,380
so with the value we receive here and the URL here with the URL parameter, so that this is flexible.

17
00:01:29,620 --> 00:01:34,780
Response type will always be JSON here so I don't need to tweak that or don't need to make that flexible

18
00:01:34,780 --> 00:01:35,950
here at this point

19
00:01:36,210 --> 00:01:42,560
and now in onLoad, I also don't want to have the logic, what I do with the response hardcoded in there,

20
00:01:42,760 --> 00:01:45,590
instead how about promisifying all of that?

21
00:01:45,820 --> 00:01:46,660
That would be easy,

22
00:01:46,660 --> 00:01:53,140
we can create a promise here with new promise as you learned it, pass that function to the promise constructor

23
00:01:53,230 --> 00:02:01,510
where we get resolve and reject as you learned it and then actually move all that code here into this

24
00:02:01,510 --> 00:02:05,650
constructor or into this function we pass to the constructor

25
00:02:05,650 --> 00:02:14,560
and now here when we're done, I want to call resolve and simply forward xhr.response because that's

26
00:02:14,560 --> 00:02:16,090
our response data.

27
00:02:18,890 --> 00:02:26,420
Thereafter, we can return the promise here and now below that, we can call sendHttpRequest to have

28
00:02:26,420 --> 00:02:33,180
a reusable function, we'll have to remove that code from onLoad of course. We'll do that in a second,

29
00:02:33,200 --> 00:02:40,670
first of all let's start by adding a new function, fetch posts and in there I will send my HttpRequest,

30
00:02:40,790 --> 00:02:49,640
a get request to this URL which I cut and then with the response data in this function which I

31
00:02:49,640 --> 00:02:56,270
pass to my then method and we could use async await instead of course, I'll use that code which I had

32
00:02:56,270 --> 00:03:00,890
in onLoad before and move that into my then block here.

33
00:03:00,890 --> 00:03:06,410
Now again, the alternative would be to use async await, add async in front of the function,

34
00:03:06,410 --> 00:03:13,580
then we would get our response data here by awaiting for the response of sendHttpRequest, we would

35
00:03:13,580 --> 00:03:20,090
remove then and instead add a semicolon and remove that extra function here which we now don't need

36
00:03:20,140 --> 00:03:26,400
anymore, remove this closing parentheses here as well and now we would have this code.

37
00:03:26,400 --> 00:03:31,860
So that is how we can do it with async await, await for this response, response data here and now we

38
00:03:31,860 --> 00:03:38,160
can use response data here instead. So store that in list of posts, go through all the list of posts and

39
00:03:38,280 --> 00:03:44,370
if we then call fetch posts here, we should still be able to fetch the post whenever we reload our

40
00:03:44,370 --> 00:03:45,350
page,

41
00:03:45,550 --> 00:03:46,620
yes seems to work.