React Axios Send Asynchronous HTTP GET Request Example

GET requests in Axios can help users make HTTP GET requests to the server and handle the response data.

In this tutorial, you will learn how to use Axios to send asynchronous HTTP GET requests in a React application and handle response.

How to Make Axios Get Request in React JS App

Steps to create an HTTP GET request using Axios:

• Step 1 – Create React App
• Step 2 – Install Axios
• Step 3 – Set up Bootstrap
• Step 4 – Create Axios GET Request Component
• Step 5 – Import Component in App.js

Step 1 – Create React App

Run the following command on your terminal to create a new react app:

npx create-react-app react-axios-tutorial

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Axios

To use Axios in a React application, you need to install it first:

npm install axios

Step 3 – Set up Bootstrap

Run the following command to install bootstrap library into your react app:

npm install bootstrap --save

Configure bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>React Axios Get Request Example</h2>
    </div>
  );
}
export default App;

Step 4 – Create Axios GET Request Component

Create a component file named UsersList.js in /src/ directory, and set up Axios Get request in it:

import React from 'react'
import axios from 'axios';
class UsersList extends React.Component{
    constructor(){
        state = {
            users: []
         }
    }
      componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
          .then(res => {
            const users = res.data;
            this.setState({ users });
          })
      } 
    render(){
        return(
            <div>
                <div class="row">
                    <div class="col-md-6 offset-md-3">
                        <br /><br />
                        <h3>Users List</h3><br />
                        <table class="table table-bordered">
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>City</th>
                            </tr>
                        {
                            this.state.users ?
                                
                                    this.state.users.map((user,i)=>
                                        <tr>
                                            <td>{++i}</td>
                                            <td>{user.name}</td>
                                            <td>{user.email}</td>
                                            <td>{user.address.city}</td>
                                        </tr>
                                    )
                            :
                            null
                        }
                        </table>
                    </div>
                </div>
            </div>
        )  
    }
}
export default UsersList;

Step 5 – Import Component in App.js

Import usersList.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import UsersList from './UsersList';
function App() {
  return (
    <div>
      
        <UsersList />
    </div>
  );
}
export default App;

Conclusion

That’s it, you have learned how to use Axios to send an HTTP GET request and handle the response data in react application.

Recommended Posts