1
00:00:02,220 --> 00:00:04,440
Now let's stick to axios here,

2
00:00:04,440 --> 00:00:06,050
let's use that. Now

3
00:00:06,060 --> 00:00:10,400
we learned about HttpRequests in the previous module,

4
00:00:10,410 --> 00:00:17,850
there we learned how we can use XMLHttpRequest or the fetch API for sending requests.

5
00:00:17,880 --> 00:00:24,150
We built our own utility function that made sending requests and working with the response a bit easier

6
00:00:24,540 --> 00:00:30,300
but still it was a bit clunky, XMLHttpRequest was clunky because of this onLoad thing and so on

7
00:00:30,630 --> 00:00:34,290
and the fetch API was a bit annoying because of the error handling.

8
00:00:34,290 --> 00:00:40,470
Now nothing too bad, you can do that but the more complex your project might get, the more complex your

9
00:00:40,470 --> 00:00:45,900
requirements might be for how you want to be able to configure requests and so on, the more annoying it

10
00:00:45,900 --> 00:00:48,480
might be to manage your own utility function

11
00:00:48,480 --> 00:00:52,860
that wraps the built-in native HTTP functionalities.

12
00:00:52,860 --> 00:00:58,650
Now you can absolutely do that but you might reach a point where you don't want to do that and therefore

13
00:00:58,710 --> 00:01:05,970
back in that project from the last module, let's now use axios. Attached you of course find my snapshot

14
00:01:06,000 --> 00:01:13,810
of this project in case you didn't follow along. So in that project we worked on, we had the sendHttpRequest

15
00:01:13,810 --> 00:01:18,890
function which we called from inside fetch posts and from inside create post.

16
00:01:18,940 --> 00:01:24,340
Now let's use axios and for that, we first of all need to add it which we can conveniently do with this

17
00:01:24,430 --> 00:01:25,660
CDN link here,

18
00:01:25,660 --> 00:01:28,450
so we're not downloading it, we're just using this link.

19
00:01:28,480 --> 00:01:34,390
Now if you wanted to, you could download it, for example you can just enter this CDN link here

20
00:01:34,990 --> 00:01:38,590
in the browser without the script tags of course

21
00:01:38,590 --> 00:01:43,570
and what this does is it loads the Javascript file and you could grab all that code and put it into

22
00:01:43,570 --> 00:01:47,010
your own script file, into an extra script file which you import

23
00:01:47,080 --> 00:01:49,470
but here I will just go for the CDN.

24
00:01:49,510 --> 00:01:56,240
So with the CDN here, let's go to index.html and add it before our script import,

25
00:01:56,260 --> 00:02:02,110
so here I'll add that script import and add defer because we have defer on our script import as well

26
00:02:02,290 --> 00:02:04,720
to make sure that they execute in the right order.

27
00:02:05,710 --> 00:02:09,690
So now we have these two script imports here and now we're ready to use axios.

28
00:02:09,700 --> 00:02:15,760
Now you can always learn how to use a library on its official page or like in this case, on its Github

29
00:02:15,760 --> 00:02:19,770
page where you'll find examples and a description and an overview,

30
00:02:19,840 --> 00:02:25,420
also since it's open source, you could also dive into the source code here and explore that, though of

31
00:02:25,420 --> 00:02:31,540
course depending on the complexity of the project, it might be quite complex to read and understand, it

32
00:02:31,540 --> 00:02:33,660
is Javascript code in the end though.

33
00:02:33,700 --> 00:02:42,080
So here however, we've got a good documentation and to use axios, we don't need to follow that step here,

34
00:02:42,100 --> 00:02:46,290
that is only required if you installed it differently, since we use a CDN,

35
00:02:46,300 --> 00:02:54,540
we'll have a globally available axios object. So here, I'll comment out this sendHttpRequest function

36
00:02:55,020 --> 00:02:57,740
or actually we can leave it here but I'll not use it anymore,

37
00:02:57,840 --> 00:02:59,800
instead here where I await

38
00:02:59,820 --> 00:03:04,990
sendHttpRequest when we fetch posts, I can use axios.

39
00:03:05,100 --> 00:03:11,500
Axios is a globally available variable now, it is made available by this script import,

40
00:03:11,550 --> 00:03:16,100
that's why we can use it. Now axios is an object which has a couple of methods,

41
00:03:16,140 --> 00:03:19,110
for example it has a get method to send a get request,

42
00:03:19,200 --> 00:03:22,740
it also has a post or a put or a delete method.

43
00:03:22,770 --> 00:03:27,690
Here we need the get method and the get method doesn't want the HTTP verb,

44
00:03:27,750 --> 00:03:33,630
the HTTP method because it always is a get request, so we can get rid of that, it only wants the

45
00:03:33,630 --> 00:03:34,940
URL.

46
00:03:35,060 --> 00:03:39,440
Now what does axios then return? Axios always uses promises,

47
00:03:39,440 --> 00:03:42,960
so that's quite convenient, we don't have to manually promisify it,

48
00:03:42,980 --> 00:03:45,770
it uses promises out of the box.

49
00:03:46,070 --> 00:03:50,200
So this get method returns a promise and therefore using await on it,

50
00:03:50,330 --> 00:03:52,780
async await of course works.

51
00:03:52,820 --> 00:03:58,790
Now what we get back here is some kind of response object and we probably want to find out what's in

52
00:03:58,790 --> 00:04:01,420
there before we try to get anything out of it.

53
00:04:01,460 --> 00:04:08,240
So let's console log response here in fetch posts and let's then go to our project, reload this and click

54
00:04:08,240 --> 00:04:09,180
fetch posts.

55
00:04:09,260 --> 00:04:14,020
Now posts are not getting rendered and we get an error because we didn't adjust all code right now

56
00:04:14,480 --> 00:04:17,920
but this is what axios returns and that's actually great,

57
00:04:17,960 --> 00:04:24,650
it's an object with the response status code but unlike the fetch API for example, it also includes the

58
00:04:24,710 --> 00:04:31,970
ready to be used data. So we don't need to convert some streamed data into snapshot as we had to do

59
00:04:31,970 --> 00:04:34,100
it here in the fetch API,

60
00:04:34,100 --> 00:04:38,560
we also don't need to parse it from JSON to Javascript data,

61
00:04:38,570 --> 00:04:45,500
instead we get that automatically converted snapshot data here as part of our response object on that

62
00:04:45,500 --> 00:04:52,970
data field and that data field therefore in this case is this array. So here in our code, where I get the

63
00:04:52,970 --> 00:05:01,130
response from axios, I can just say list of posts is equal to response.data because we have that

64
00:05:01,160 --> 00:05:09,500
data property on the response object and that's it. Now what happens in the case of an error though, if

65
00:05:09,500 --> 00:05:12,650
we send this to an incorrect URL?

66
00:05:12,980 --> 00:05:14,080
Well if we do that,

67
00:05:14,330 --> 00:05:20,830
so if I reload now and I click on fetch posts, I automatically get a nice error message here.

68
00:05:21,050 --> 00:05:23,880
So axios also got me covered there,

69
00:05:23,950 --> 00:05:25,690
unlike the fetch API

70
00:05:25,850 --> 00:05:34,190
and unlike XMLHttpRequest, axios does not treat technically successful responses which have a response

71
00:05:34,250 --> 00:05:36,860
status code though as successful,

72
00:05:37,070 --> 00:05:44,360
instead it does the same thing we manually build here, it throws an error if we get a response that technically

73
00:05:44,360 --> 00:05:45,250
succeeded,

74
00:05:45,320 --> 00:05:53,180
so that was delivered without problems but that has a 400 or 500 status code, axios throws an error for

75
00:05:53,180 --> 00:05:59,930
such responses. So it does not just throw an error if we have a technical problem like a network connectivity

76
00:05:59,930 --> 00:06:02,230
issue, it also throws an error

77
00:06:02,300 --> 00:06:07,450
if we have a technically correct response with an error status code though.

78
00:06:07,640 --> 00:06:15,350
So here we therefore get an error and we make it into the catch block here without any extra work, which

79
00:06:15,350 --> 00:06:18,140
is one of the reasons why axios is so popular,

80
00:06:18,170 --> 00:06:23,760
it just works, using the data is simple, working with errors is simple.

81
00:06:23,780 --> 00:06:26,750
So here we got our error message,

82
00:06:26,750 --> 00:06:34,280
we can also for example have a look at the error.response to look into the response that

83
00:06:34,280 --> 00:06:37,500
caused the error because technically it's a correct response,

84
00:06:37,520 --> 00:06:43,130
so of course it has a status property, it has some data and if we need that, we can get access to it with

85
00:06:43,130 --> 00:06:45,550
the response property on that error

86
00:06:45,560 --> 00:06:50,660
object axios produced. By the way if you're wondering how I know that,

87
00:06:50,780 --> 00:06:53,150
besides using console log to find out,

88
00:06:53,210 --> 00:06:56,770
you'll find such information in the official docs typically.

89
00:06:56,930 --> 00:07:05,300
So here if we now save this and we reload, if I fetch my posts, I do get the response that caused the error

90
00:07:05,360 --> 00:07:11,260
so that I can have a look at the response body in case it included additional useful information.

91
00:07:12,660 --> 00:07:14,720
So that's axios for getting data,

92
00:07:14,730 --> 00:07:19,330
now let me fix that URL and see whether that all works now,

93
00:07:19,470 --> 00:07:20,460
looks good,

94
00:07:20,460 --> 00:07:26,040
so let's now make sure we also use axios to create posts. For that we want to send a post request and

95
00:07:26,040 --> 00:07:32,070
therefore instead of sendHttpRequest, we can use axios.post, again

96
00:07:32,190 --> 00:07:39,270
we don't need to specify the HTTP method because that will be set by axios now and it will now just take

97
00:07:39,270 --> 00:07:42,650
a URL and the data we want to submit.

98
00:07:42,650 --> 00:07:48,550
Now here, I don't want to send my FormData but my post here, so this object.

99
00:07:48,580 --> 00:07:55,690
Now if we do that, let's add then here or use async await of course, since I have async here,

100
00:07:55,690 --> 00:07:57,780
let's actually go for async await.

101
00:07:57,820 --> 00:08:03,580
So here await and get the response, just to find out whether it worked, here

102
00:08:03,580 --> 00:08:12,510
I'll console log the response now. If we do that, let's save this, reload and enter a new post,

103
00:08:12,510 --> 00:08:17,960
does this work and click add and that's looking quite good,

104
00:08:17,970 --> 00:08:25,260
we get back a response with the 201 status code and we see this is the data we submitted, so that works

105
00:08:25,470 --> 00:08:29,350
and there is something interesting here. Besides this being very simple,

106
00:08:29,400 --> 00:08:33,210
we also didn't have to add any headers here.

107
00:08:33,270 --> 00:08:40,200
Please keep in mind that for the fetch API and XMLHttpRequest, we manually had to add the application/json

108
00:08:40,200 --> 00:08:42,320
content type header,

109
00:08:42,330 --> 00:08:44,850
now axios does this for you.

110
00:08:44,850 --> 00:08:50,510
It takes the post here which by the way also is not JSON but a normal Javascript object

111
00:08:50,730 --> 00:08:53,520
and for one, it's then transforms this to JSON

112
00:08:53,640 --> 00:08:56,550
but b) it also adds the header for you

113
00:08:56,790 --> 00:08:59,550
and axios doesn't always use JSON there,

114
00:08:59,550 --> 00:09:01,080
it actually is pretty smart.

115
00:09:01,170 --> 00:09:04,350
Here it analyzes the data you're trying to add

116
00:09:04,650 --> 00:09:10,600
and if that's an object or an array, it assumes that you want to convert this to JSON,

117
00:09:10,710 --> 00:09:17,190
so it's then stringifies this to convert it to JSON and sets the application/json header. If

118
00:09:17,190 --> 00:09:22,430
we would add the FormData here, axios would detect this as well

119
00:09:22,560 --> 00:09:31,460
and if we do that and we try to send some data and we go to the network tab, we see that now the request

120
00:09:31,490 --> 00:09:37,610
actually automatically appended FormData and the content type was also set correctly.

121
00:09:37,670 --> 00:09:45,530
So axios analyzes the body you're appending and then behaves correctly to set the right headers and convert

122
00:09:45,610 --> 00:09:46,920
the data correctly,

123
00:09:46,940 --> 00:09:52,780
so that's again extra convenience you get from axios. Now to finish it all up,

124
00:09:52,790 --> 00:09:58,790
let's also make sure we handle a deletion and for that, we can use axios delete here, don't need to

125
00:09:58,790 --> 00:10:06,020
pass in the method, just the URL and therefore with this added here, if we save that and reload, if

126
00:10:06,020 --> 00:10:14,120
I click fetch posts and I then click on delete here, we see such a delete request is sent here successfully.

127
00:10:15,460 --> 00:10:22,030
So that's axios, it's just one of many Javascript libraries, just like Lodash, it's a very popular library

128
00:10:22,390 --> 00:10:29,260
and when working with HTTP, it really is a great alternative to manually using XMLHttpRequest or the

129
00:10:29,260 --> 00:10:36,220
fetch API. You can use these options but the more complex your application gets, the more micromanagement

130
00:10:36,430 --> 00:10:42,520
you might need to do to make sure that these APIs behave correctly, axios then might be a great alternative

131
00:10:42,700 --> 00:10:44,290
which is simply easier to use.