How to Make Axios GET Request in React?

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 a DELETE request 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

npm install axios

yarn add axios

Syntax to import the axios package

import axios from "axios";

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.

The 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.

import React from 'react';
import axios from 'axios';

export default class EmployeeList extends React.Component {
    state = {
        employees: []
    }

    componentDidMount() {
        axios.get(`http://dummy.restapiexample.com/api/v1/employees`)
        .then(response => {
            this.setState({ employees: response.data });
        })
    }

    render() {
        const { employees } = this.state;
        return (
            <>
                <h4>Axios GET Request Example in React</h4>
                <table classname="table table-bordered">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Salary</th>
                        <th>Age</th>
                    </tr>
                    {employees && employees.map((emp) => (
                        <tr>
                            <td>{emp.id}</td>
                            <td>{emp.employee_name}</td>
                            <td>{emp.employee_salary}</td>
                            <td>{emp.employee_age}</td>
                        </tr>
                    ))}
                </table>
            </>
        )
    }
}

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 the employees state.

In the 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.

The 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.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function EmployeeList() {
    const [employees, setEmployees] = useState([]);

    useEffect(() => {   
        axios.get(`http://dummy.restapiexample.com/api/v1/employees`)
        .then(response => {
            setEmployees(response.data)
        });
    }, []);


    return (
        <>
            <h4>Axios Get Request Example in React</h4>
            <table classname="table table-bordered">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Salary</th>
                    <th>Age</th>
                </tr>
                {employees && employees.map((emp) => (
                    <tr>
                        <td>{emp.id}</td>
                        <td>{emp.employee_name}</td>
                        <td>{emp.employee_salary}</td>
                        <td>{emp.employee_age}</td>
                    </tr>
                ))}
            </table>
        </>
    );
}

In the above react hook example, we use the useEffect() hook to make HTTP GET requests using the Axios. First, we import the useState, and 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 map() function.

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 exists. So now in this example code, we will use the catch() promise method after the then() promise.

componentDidMount() {
    axios.get(`http://dummy.restapiexample.com/api/v1/employees`)
    .then(response => {
        this.setState({ employees: response.data })
    })
    .catch(error => {
        this.setState({ errorMessage: error.message });
    });
}

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 front end.

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.

componentDidMount() {
    const headers = {
        'Authorization': 'Bearer token_value',
    };
    axios.get(`http://dummy.restapiexample.com/api/v1/employees`, { headers })
    .then(response => {
        this.setState({ employees: response.data })
    })
}

You can see in the above example, that 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 async and await javascript expressions instead of using the 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.

async getEmployees() {
    const response = await axios.get(`http://dummy.restapiexample.com/api/v1/employees`);
    this.setState({ employees: response.data })
}

componentDidMount() {
    getEmployees()
}

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 a 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 the above examples you see simple ways to use the 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.

componentDidMount() {
    axios({
        method: 'get',
        url: 'http://dummy.restapiexample.com/api/v1/employees',
        responseType: 'json'
    })
    .then(response => {
        this.setState({ employees: response.data })
    })
}

The responseType parameter is based on your requirements, which means in what type of form you want to get a response from the request.

Conclusion

So in this tutorial, you learn about Axios and how to make an HTTP GET request using it. We also covered using of 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.