Welcome back.
In the previous video, we're able to make a HTTP request inside our React application using the Fetch
HTTP client.
So let's make use of Axios.
Also with a third party HTTP client.
So back to our terminal here.
Let me shut down my server, click the console and let's install Axios and there we go.
John at.
Is the PM going to be PM I.
And then the name of the package.
So why is it stolen?
Let's get back to work.
So here we can comment this one out.
And it says that using.
It.
Using Fetch.
And see the syntax, the differences.
So here is using this using Axios client.
So here the same thing we need to bring in the Axios.
So in part, Axios is from.
For Axios and that is it.
So we need to use effect one more time as a function, then pass in a callback function as a first argument
as that in a second I'm going to be my array of my dependencies.
So I'll talk about this one very soon.
So again, here we can now make what the HTTP call, a HTTP call here.
So the same process instead of using fetch, I'm going to use Axios.
So Axios the same thing and then I'm going to use dot get method going to get request they pass in the
API URL.
So here we also want to handle the promise here.
But here we only have one level.
So let me show you what I mean here.
So dot then here and then dot catch here also.
So in each of these we pass in a callback function called anonymous function here.
Like that.
And then here too, you pass in your callback function and then ask that if something goes wrong.
So here we have the actual post and then here we have the error if there is one.
So here we can console.log immediately and say console that, log the error.
And then here too, we can return it immediately by saying console.log.
The.
Post.
So we see that for Axios we don't need to convey the data from the we get to Jason.
But before we can get it, I tried data here that is simpler to read here.
There is no conversion after getting data here and that is about Axios.
So let's save it.
And now let's have a look.
Let's refresh it.
My server is down because I didn't start my server.
Clear the console and then end PM run or John starts any of this method.
You'll be good to go provided you have John being installed.
So let's have a look.
Let's refresh it.
To boot in.
Let's wait and see.
We add script one to start.
All right, now let's see the response.
Now see that?
Here we have the data being given to us automatically.
You have data on the data on the response as data here.
So let's check it out.
And now let's see, we have the data as we use fetch.
So that is it.
So what about if you want to avoid using the then and make use of async await to make our life easier?
How are we going to do it?
So one more time see that we have the dependencies.
So this use effect will depend on inserting data.
If it's ready.
We need to call the the use effect again.
For example, if this is a real world application that we build and let's say that we want to fetch
a details of a particular user, so maybe you want to get the ID of the user in the parameter.
So by the time we make a request, we get an ID, then you make a request to the database and then get
a user.
By the time you get it, the use effect has already been run.
So if we want to run again, you want to pass the ID into the dependencies as that.
So if it's ready this effect, this is effect will also run again.
So we are going to make use of it as you move on.
Don't worry if it's not clear to you, the most important thing here is to be able to make a HTTP request.
So in the next video we are going to convert this one to make use of async await.
And then we also want to handle errors and loading and display the data into the browser.
So let's get working in this video, guys.