1 00:00:00,050 --> 00:00:00,590 Okay. 2 00:00:00,620 --> 00:00:07,040 When it comes to front end, you can probably already imagine that we'll make a bunch of requests. 3 00:00:07,460 --> 00:00:13,460 Essentially, we have a server with a bunch of endpoints, so it only makes sense that on the front 4 00:00:13,460 --> 00:00:21,410 end we will utilize it and you can definitely build this application with a built in fetch API, but 5 00:00:21,410 --> 00:00:27,800 it's always my preference to actually use the library by the name of Axios, which just provides the 6 00:00:27,800 --> 00:00:29,060 elegant way. 7 00:00:29,860 --> 00:00:32,800 Of building complex features. 8 00:00:33,130 --> 00:00:37,030 And in order to get started, you want to install the library. 9 00:00:37,060 --> 00:00:42,550 Now, please keep in mind when we're talking about this project, of course, I mean in the client. 10 00:00:42,880 --> 00:00:45,690 You can also use this package on a server. 11 00:00:45,700 --> 00:00:52,480 But in this scenario, of course, if you want to install the package, you need to make sure you first 12 00:00:52,480 --> 00:00:56,740 navigate to the client and then you go with NPM I and Axios. 13 00:00:56,740 --> 00:01:05,470 And after that we want to navigate to main JSX, import the Axios and let's set up the same get request 14 00:01:05,470 --> 00:01:09,040 and right away also set up the custom instance. 15 00:01:09,070 --> 00:01:12,850 Essentially, I just want to showcase what responses we're going to get back and. 16 00:01:13,470 --> 00:01:17,640 What are the first benefits we'll see with Axios? 17 00:01:17,670 --> 00:01:22,320 Of course, if you follow the command where we installed all the packages on the front end, you should 18 00:01:22,320 --> 00:01:25,490 have already packaged in the package Json. 19 00:01:25,500 --> 00:01:32,520 So in my case, I'll right away navigate to main JSX and instead of fetch. 20 00:01:33,480 --> 00:01:35,970 Let's first import the Axios. 21 00:01:36,180 --> 00:01:38,700 Then let's set up the request. 22 00:01:38,700 --> 00:01:44,790 And what's really cool by default, right away Axios turns this into a Json, so we really don't need 23 00:01:44,790 --> 00:01:50,940 to do anything, so I'm just going to go with data, then await and notice something interesting. 24 00:01:50,940 --> 00:01:57,570 So when it comes to the V8, we can also right away use the top level await. 25 00:01:57,570 --> 00:01:59,490 So everything is going to work. 26 00:01:59,490 --> 00:02:06,690 We don't need to set up a function in order to use the async await, just like I showed you on Node. 27 00:02:07,480 --> 00:02:10,900 Well, then we want to go with Axios and the default one is get. 28 00:02:10,900 --> 00:02:16,990 So essentially you can go here and provide the URL, but it's always my preference to be explicit and 29 00:02:16,990 --> 00:02:19,810 provide here that it's going to be a get request. 30 00:02:19,840 --> 00:02:25,150 Now, of course, if we want to go with post, we write here post if we want to go with Patch and hopefully 31 00:02:25,150 --> 00:02:26,460 you see where I'm going with this. 32 00:02:26,470 --> 00:02:34,300 So effectively we get the Axios from Axios and then we can just chain the methods and based on the method, 33 00:02:34,300 --> 00:02:40,650 that's going to be the request that we're sending, whether that's get post patch and the rest of them. 34 00:02:40,660 --> 00:02:42,250 So let's go here with get. 35 00:02:42,250 --> 00:02:45,280 And again, the URL for now is not going to change. 36 00:02:45,280 --> 00:02:46,660 So let me provide it here. 37 00:02:46,660 --> 00:02:53,400 We don't need these lines of code and I simply want to log just so we can see what we're getting back. 38 00:02:53,410 --> 00:02:56,860 So let me save it and notice. 39 00:02:57,040 --> 00:03:03,280 So in here, this giant object right now is what we're getting back from the Axios. 40 00:03:03,280 --> 00:03:08,660 And our actual data is going to be located here in the data property. 41 00:03:08,660 --> 00:03:10,460 So maybe it's a little bit confusing. 42 00:03:10,460 --> 00:03:11,090 So. 43 00:03:11,880 --> 00:03:14,760 Let me just rename it to response. 44 00:03:14,760 --> 00:03:16,320 So that's the response I'm getting back. 45 00:03:16,320 --> 00:03:23,910 And in that response object, I'll have data property, which is an object, and in here I'll have the 46 00:03:23,910 --> 00:03:24,450 message. 47 00:03:24,450 --> 00:03:28,350 So of course, when we're going to be getting the jobs, when we're going to be getting the user and 48 00:03:28,350 --> 00:03:31,320 all that, it's going to be located over here. 49 00:03:31,320 --> 00:03:33,600 And there's tons of other things. 50 00:03:33,600 --> 00:03:40,830 But to tell you honestly, for the most part, we'll just stick with the data and also eventually I'll 51 00:03:40,830 --> 00:03:41,610 show you. 52 00:03:42,400 --> 00:03:46,810 What happens if we have an error and the idea is pretty much the same again, there's going to be a 53 00:03:46,810 --> 00:03:53,320 giant object and we're just going to be looking for specific things in that error response because we'll 54 00:03:53,320 --> 00:03:57,970 use those values to showcase something to the user. 55 00:03:57,970 --> 00:04:01,210 So that should do it for the basic Axios setup. 56 00:04:01,210 --> 00:04:07,630 But before I let you go, I also right away want to set up essentially a custom instance. 57 00:04:07,660 --> 00:04:13,480 Now we can provide tons of things in that custom instance, but in my case I'm just going to go with 58 00:04:13,480 --> 00:04:14,680 base URL. 59 00:04:14,680 --> 00:04:15,970 So what was my idea? 60 00:04:15,970 --> 00:04:19,720 Well, we have right away a proxy. 61 00:04:19,750 --> 00:04:20,560 Correct. 62 00:04:20,740 --> 00:04:27,100 And proxy always is going to point to localhost and then 5100. 63 00:04:27,310 --> 00:04:34,120 Now we can also shorten this URL since I know that all my requests are going to start with API version 64 00:04:34,120 --> 00:04:34,870 one. 65 00:04:35,140 --> 00:04:39,370 Well we can set up the base URL and now we can nicely skip it. 66 00:04:39,370 --> 00:04:44,930 Please keep in mind that of course you can set up tons of things in that custom instance. 67 00:04:45,510 --> 00:04:48,970 But in this project we're only going to have one. 68 00:04:48,990 --> 00:04:51,420 So first we want to navigate to utils. 69 00:04:51,420 --> 00:04:53,340 We want to create a new file. 70 00:04:53,540 --> 00:04:56,670 And in my case, I'm going to call this custom. 71 00:04:57,430 --> 00:04:58,860 Fetch JS. 72 00:04:59,200 --> 00:05:01,990 Then we want to grab that import from Axios. 73 00:05:03,330 --> 00:05:06,450 And in here we just want to go with custom. 74 00:05:07,510 --> 00:05:13,990 Fetch and we want to set it equal to Axios and we want to call create. 75 00:05:14,080 --> 00:05:16,540 So this is going to create the custom instance. 76 00:05:16,550 --> 00:05:24,250 So just like we use Axios to set up the requests, we can now use the custom fetch, but in that create 77 00:05:24,340 --> 00:05:28,210 we'll pass in some additional things and they will be added by default. 78 00:05:28,240 --> 00:05:34,930 So let's say when we start using this custom fetch, it will right away have the base URL and in order 79 00:05:34,930 --> 00:05:38,680 to set up the base URL notice right away I suggest that property. 80 00:05:38,770 --> 00:05:42,430 And as far as the value, like I said, we're going to go with API version one. 81 00:05:42,430 --> 00:05:42,970 Why? 82 00:05:42,970 --> 00:05:48,610 Well, because in a server all our requests start with this one and then after that of course we go 83 00:05:48,610 --> 00:05:53,920 with either jobs users and auth, then we want to export. 84 00:05:54,840 --> 00:05:55,770 Default. 85 00:05:56,840 --> 00:05:58,410 And the custom fetch. 86 00:05:59,870 --> 00:06:05,510 And then back in the main, Yes, I will remove it in a second, but I still want to showcase that. 87 00:06:05,540 --> 00:06:09,800 Of course everything works and therefore I will remove this Axios one. 88 00:06:10,580 --> 00:06:13,670 Let me try to use auto import. 89 00:06:14,340 --> 00:06:17,700 And then instead of API version one. 90 00:06:18,660 --> 00:06:21,030 Let's just take this one out. 91 00:06:22,000 --> 00:06:24,160 We still need to use a weight, of course. 92 00:06:24,700 --> 00:06:27,250 And as far as the methods, it's going to be the same deal. 93 00:06:27,340 --> 00:06:31,570 So we still use, again, the get post patch and all that. 94 00:06:31,690 --> 00:06:35,110 And the default one is going to be get, but I still like to use it. 95 00:06:35,110 --> 00:06:40,240 And then remember we have the base URL, so we don't need this API version one. 96 00:06:40,240 --> 00:06:42,010 So all throughout. 97 00:06:42,900 --> 00:06:45,630 The upcoming videos, I'll use this one. 98 00:06:45,660 --> 00:06:47,220 The custom fetch. 99 00:06:47,220 --> 00:06:52,820 And essentially, if everything is correct, I should have the same response in the console. 100 00:06:52,830 --> 00:06:55,830 And with this in place, we can move on to the next step. 101 00:06:55,830 --> 00:06:58,560 And before we do that, let me just remove it again. 102 00:06:58,560 --> 00:07:00,960 This was just for demonstration purposes. 103 00:07:00,960 --> 00:07:03,390 We're not going to use it here in the app. 104 00:07:03,390 --> 00:07:04,380 JS.