Setting up Axios

[00:00 - 00:10] We did work with Xios in the beginning, but I want to set it up correctly. It's better to locate it at a different directory and then use it from different components.

[00:11 - 00:21] So in this lesson, let's do just that. Inside the SRC directory, let's create a new folder and let's call it actions.

[00:22 - 00:34] Inside the actions folder, we need to create a new file which will be called agent.gues. This file will be responsible for all the API requests we make to our server.

[00:35 - 00:49] First thing to do is import Xios from Xios. In Xios, we can store base URL in a variable.

[00:50 - 00:55] So it gets easier if you want to append anything on it. We already know what our base URL is.

[00:56 - 01:23] We just need to write Xios.default.base URL and our base URL which is http localhost 5000/api. We can also save our response body in a variable.

[01:24 - 01:31] If you remember, our data is stored inside the response.data. So let's do just that to make our lives a bit easier.

[01:32 - 01:51] Const response body is equal to response and this response will be of type Xios response. It will be imported automatically.

[01:52 - 02:02] And finally it will receive response.data. We are just type defining our response here by giving it a type of Xios response.

[02:03 - 02:12] Now we are actually going to start take advantage of TypeScript. I would also like to store type of requests in an object to take full advantage of Xios.

[02:13 - 02:25] So that's right, const requests is equal to it's going to be an object. So we need to write all type of requests.

[02:26 - 02:48] First one is get where we need to pass URL to the request. The URL is going to be of type string and here Xios.get URL it will then receive the response from the request.

[02:49 - 02:56] So then response body. We have stored the response body in a variable already.

[02:57 - 03:10] We have other types of requests as well which are post, put and delete and not much changes there. So just copy this line three more times.

[03:11 - 03:26] One, two, three and change get to post. Here let's change get to put.

[03:27 - 03:40] Since delete is a reserved word we can write TEL here and here instead of get we can write delete. Post and put request also needs body.

[03:41 - 04:07] So we can add body here body which will be of type object and same goes for the put request body much will be of type object. We also need to pass it here with URL body and body.

[04:08 - 04:17] Perfect. We can now create a new object which will store all kinds of requests we are going to make for our courses.

[04:18 - 04:28] Just need to create a new variable and let's call it courses. Again it's an object.

[04:29 - 04:42] First thing we need to do is to make a request which lists all the courses. So we can write list which is going to be a function which will make a get request.

[04:43 - 04:54] So we can write requests.get. Now whatever we write inside this parameter will be appended to the base URL here.

[04:55 - 05:07] Our endpoint is localhost 5000/api/courses. So we just need to write inside a string /courses.

[05:08 - 05:21] We don't need to use promise to receive the response because we already did that with the request on top. Our final object will be called an agent which will carry all the types of requests.

[05:22 - 05:33] Right now we only have courses so let's write that. First agent again it's an object which has courses for now.

[05:34 - 05:46] Now finally let's export default agent. We can simply import the agent and make multiple API requests whether.

[05:47 - 06:01] Now if we hover over the list we see promise of type n. Since we are using TypeScript we want type safety right we should be clear what data we are expecting for that we need to type define it.

[06:02 - 06:03] So let's do that in the next lesson.