In this tutorial, we will learn about Axios and how we can make a GET request using it in react application. It is a very good npm package to handle HTTP requests.
You can make a GET request to retrieve the data, a POST request to create the data, a PUT request to update the data, and DELETE requests to delete the data using this Axios library.
But in this tutorial, we will focus on Axios GET request to get the data from API and show it on react application. We will also work with some examples to better understand.
Let’s get started!!!
Axios HTTP GET Request in React
First, we have to install the Axios package using the npm. We will see some basic examples of Axios GET requests and we will also use the Axios API to make GET requests.
Install Axios From NPM
You have to run the following npm command to install the Axios package in your project. Make sure you are in the project directory.
This command will install all the dependencies for the Axios package, so you can import it into your react component and then use it.
Command to install the axios package
Syntax to import the axios package
Axios GET Request in Class-Based Component
In this method, we will use a class-based react component to make a GET request using the Axios package. If you want to make a GET request immediately after rendering the component successfully then use the
componentDidMount() lifecycle method.
componentDidMount() method runs only once when the component is already rendered in the DOM (Document Object Model). You can say this method is the last step of the mounting phase of react component.
In the above example, we make an HTTP GET request using the Axios package in the
componentDidMount() method. It will return the JSON object as response data and then we set it into employees state.
render() method, we make a simple table to print that result. So we use the
map() function to loop through employee data in react component and print it into the table. You can use the react datatable and bootstrap to make a good presentable list of employees.
Axios GET Request in Function-Based Component
Now we will use a function-based react component to make GET requests using the Axios. In the function-based component will use the react hook (
useEffect()) instead of lifecycle method to run the Axios request.
useEffect() hook work same as
componentDidMount() and run when the component loads. You can pass the second parameter as an array of dependencies so the hook determines when need to run. If you pass the empty array ([ ]) then the hook only will run once when the component is rendered.
In the above react hook example, we use the
useEffect() hook to make HTTP GET requests using the Axios. First, we import the
useEffect from react and then import the Axios package.
Then we make the Axios GET request in the
useEffect() hook and set the response in the state using the useState hook. And final print the data using the
Axios GET Request with Error Handling
In the above examples, we used only
then() promise to return the response and not handle any error if there exist. So now in this example code, we will use the
catch() promise method after the
The above example will send the HTTP GET request with Axios and then use the
then() promise to return the response data and set it into the state.
But what if the request returns errors and you want to know what is wrong. So for this purpose we used the
catch() method after the
then() promise method. It will return the error message. You can console the error or set it into the state to print it on the frontend.
Axios GET Request with HTTP Headers
Now we will see how we can send the Axios GET request with HTTP headers in react component. To send the HTTP headers in Axios request, you have to pass the second parameter as the header object.
You can see in the above example, we set the Authorization header in the headers constant and then pass it into Axios request as the second parameter. You can also pass the custom HTTP headers in the request.
Axios GET Request Using async/await
In this method, we will use
then() promise method. First, we will use async before the function name and then make a GET request in the function using the await expression.
The above example sends the GET request using the Axios with await expression. It means the function will not proceed further until the request gets the response.
When the promise returns the response then the function will continue to set the state for employees state. The async and await expression you can use with any function that you want to wait for a response before proceeding with further action.
Axios GET Request Using Axios API
All above examples you see with simple ways to use Axios package in react to make HTTP GET request. Now we will see how to make GET requests using the Axios API.
The Axios API is the same way to make an HTTP request, you just have to pass the relevant config data to Axios like method, URL, response type, etc.
The responseType parameter is based on your requirements, which means in what type of form you want to get a response from the request.
So in this tutorial, you learn about Axios and how to make an HTTP GET request using it. We also covered about to use Axios in class-based components and function-based components.
Furthermore, you see how to handle errors with axios and use the async/await expression. Also, send the HTTP headers in axios GET request from react component.
If you have any questions or doubts or suggestions, please do let me know in the comment section. I would appreciate and respond to you as soon as possible.