GET request using axios with React Hooks

Today we’ll show you how to integrate GET request using axios with React Hooks.

We had created an article to call an API using the `window.fetch` method.

Axios is the promise based client for frontend and backend applications. Axios offers may more features compare to `fetch`.

In this article, we will create the following example using the axios package.

Demo Application

Output - GET request using axios with React Hooks - Clue Mediator

Table of Contents: GET request using axios

Installing axios
Syntax of the GET request using axios
GET request with HTTP headers
Example

1. Installing axios

Run the following command to install the axios with npm or yarn CLI.

npm CLI: `npm install axios`

yarn CLI: `yarn install axios`

2. Syntax of the GET request using axios

The following syntax will be used to call GET API using axios.

axios.get("https://reqres.in/api/users")
  .then(response => {
    console.log("Status: ", response.status);
    console.log("Data: ", response.data);
  }).catch(error => {
    console.error('Something went wrong!', error);
  });

In the above code, we have used the `get` method of the axios and pass the URL in the first parameter.

3. GET request with HTTP headers

We can use the second parameter to pass the HTTP headers. Look at the following code where we are passing the `Authorization` and `Custom-Header` along with the same request.

const headers = {
  'Authorization': 'Bearer my-auth-token',
  'Custom-Header': 'xxxx-xxxx-xxxx-xxxx'
};
axios.get("https://reqres.in/api/users", { headers })
  .then(response => {
    console.log("Status: ", response.status);
    console.log("Data: ", response.data);
  }).catch(error => {
    console.error('Something went wrong!', error);
  });

4. Example

Here, we will use the bootstrap package to design the page where we will get the list of the data on page load.

App.js

import React, { useEffect, useState } from 'react';
import axios from "axios";
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  const [userList, setUserList] = useState([]);

  useEffect(() => {
    axios.get('https://reqres.in/api/users').then(res => {
      setUserList(res.data.data);
    });
  }, []);

  return (
    <div class="container-fluid p-3">
      <h5 class="d-inline-block">GET request using axios with React Hooks - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5>

          {userList.map(x => )}
          {userList.length == 0 && }
        <table class="table table-sm mt-3">
        <thead class="thead-dark">
          <tr><th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Avatar</th>
        </tr></thead>
        <tbody><tr>
            <td>{x.first_name}</td>
            <td>{x.last_name}</td>
            <td>{x.email}</td>
            <td><img src={x.avatar} width="50" height="50"></td>
          </tr><tr>
            <td class="text-center" colspan="4">
              <b>No data found to display.</b>
            </td>
          </tr></tbody>
      </table>

    </div>
  );
}

export default App;

Run the above file and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project