Http Request

axios.get('https://tutorials.codippa.com/http-request').then(response => {
  // called when the response is available
   console.log(response);
})
// other code

Above snippet executes a GET request using axios which fetches data from the server. Obviously, this is going to take some time. The application does not block but continues executing the code after the request is made. As soon as the response is available, then block is executed where you can do further processing with the response. Here we are just logging it to the console. This is the advantage of using Promises. Further details about axios are available here.
Using axios in react
Once axios package is installed in the application, we can straightaway start using it to make HTTP requests. For using axios, we need to import it in the component where we want to use it. For fetching data, we will be using a dummy datasource URL https://jsonplaceholder.typicode.com/users. This will return an array of objects each having some properties, we will be accessing their name property.
As we learned in the component lifecycle section, any initialization should be performed in the componentDidMount lifecycle method since we can easily modify the state object in this method. Thus, GET request for fetching data will be written here. Once the response is fetched, we will be displaying the list of users in the render method. Code is given below followed by an explanation. Copy and paste this code in the index.js file of your react application and see the result for a better understanding.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

// User component
const User = (props) => {
    return <div>{props.name}</div>
}

// create a router component
class HTTPRequestComponent extends Component {
    state = {
        users: []
    }
    
    componentDidMount() {
        // GET request using axios
        axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
            // populate users object with response
            this.setState({users:response.data});
        })
    }
    render(){
       // check is users has been populated
       if(this.state.users) {
           const users = this.state.users.map(user => {
              return <User name = {user.name}/>
           });
           return <div>{users}</div>
        } else {
           // show loading message till response is received
           return <div>Loading...</div>
        }
 }
}
// attach
ReactDOM.render(<HTTPRequestComponent />, document.getElementById('root'));

As a first step, axios is imported into the component and state object is initialized with the users array. This array is initially empty but will hold the response once it is fetched from the server.

In the componentDidMount method, we make an HTTP GET request using axios supplying the URL. We cannot execute the GET request in the render method since fetching the response from the server might take some time and javascript will not wait for the response to return and thus, render method will complete while the response is being fetched. So nothing will be rendered on the screen.
Once the response is fetched, the callback function is executed which populates the response into the users array of state object using setState method. Note that the response from the GET request contains a data property which contains the actual records. You can check this by writing console.log(response);.
Since we are modifying the state object in componentDidMount method, it causes the render method to be executed again. In the render method, we first check if the users array of state object has been populated. If it is, then we iterate over the array using javascript’s map method and return a user component with its name property evaluated to the name of each user fetched from the server. If the users array is not populated, we display a Loading… message. Note that in the absence of if condition, you might get an error.
Also, note that we created a User component as a functional component which receives a props object. props object contains a name property which we have set in the render method.
Similar to the GET request, we can also execute all other HTTP requests using axios. That is all in this section.