React Tutorial- Axios Send Asynchronous HTTP Post Request

React- Axios Send Asynchronous HTTP Post Request Example

Friends, in this React tutorial, we will get to know the holistic approach to making HTTP asynchronous post requests in React using Axios Javascript client.

But first of all, let us understand that HTTP requests are the lifeline of sites and applications. Due to HTTP requests, subtle communication is established between the client and the server.

HTTP is an application layer protocol that stands for Hypertext Transfer Protocol. In this post, we will discuss asynchronous HTTP post requests.

 

An asynchronous request does not interfere with another operation and at the same time, we can execute another operation. This paradigm is helpful in not blocking the javascript engine of the browser.

Axios is a profound package, especially developed to handle relentless HTTP requests. Throughout this guide, we will definitely get to know how to handle HTTP post requests. However, it’s not limited to only sending data to the server.

 

Following are the other Axios HTTP methods and options but we will not discuss in this tutorial:

1. get(url[, config])
2. request(config)
3. delete(url[,config])
4. head(url[,config])
5. options(url[,config])
6. post(url[,data[,config]])
7. put(url[,data[,config]])
8. patch(url[,data[,config]])

 

React Tutorial-How To Use Axios To Make Asynchronous HTTP Post Request

Step 1- Install New Application

Step 2- Add Axios And Bootstrap Packages

Step 3- Set Up Fake Server

Step 4- Create Component File

Step 5-Register Component In React

Step 6- Run App Development Server

 

Let’s learn in detail now:

Step 1- Install NeW React App

As some of us already know the very step is just to download a new React app by using create-react-app. See the below-given command:

npx create-react-app react-planet

Next is to get into the project folder:

cd react-planet

 

Step 2- Add Axios And Bootstrap Packages

It is required to add the Axios library in React for making flawless HTTP requests. Then also, we need to add bootstrap packages. Therefore, the following command would make us install both the packages simultaneously:

npm install axios bootstrap

Further, we will add Bootstrap into the App.js file. It will open the gates to create UI modules in our React app development process:

import 'bootstrap/dist/css/bootstrap.min.css'

 

Step 3- Set Up Fake Server

Here, in this step, we need to set up the fake server for which we will take the help of json server package.

This library is very easy to use due to which we can include it in React to build the fake APIs.

npm i json-server

While the json-server is installing, it also created a db.json file.

Afterward, we have to open db.json file and the below code is to be added to the file:

{
  "posts": [
    {
      "id": 1,
      "title": "John Doe"
    }
  ]
}

 

By default, this server starts on port 3000. So, the React app is working on the same port. We may also use the port attribute to run the API server on a different port:

json-server --watch db.json --port 3001

 

After we have run the command, the API source displayed on our terminal screen:

\{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3001/users

  Home
  http://localhost:3001

 

Step 4- Create Component File

In the fourth step, we will get to learn how to conjugate everything in a separate file to make the HTTP post request module.

For this, we will create HttpPost.js file in the components/ folder. Also, we have to add the following code into the file:

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

export default function HttpPost() {
  const [userName, createUser] = useState('')

  const onSubmit = async (e) => {
    e.preventDefault()

    const post = { userName: userName }

    try {
      const res = await axios.post('http://localhost:3001/users', post)
      console.log(res.data)
    } catch (e) {
      alert(e)
    }
  }

  return (
    <div className="container mt-2">
      <h2>React HTTP Post Request Example</h2>
      <form onSubmit={onSubmit}>
        <div className="mb-2 mt-3">
          <input
            type="text"
            placeholder="Name"
            className="form-control"
            onChange={(event) => {
              createUser(event.target.value)
            }}
            value={userName}
          />
        </div>

        <button type="submit" className="btn btn-danger">
          Create
        </button>
      </form>
    </div>
  )
}

 

Step 5- Register Component In React

Again, we need to open the App.js file and register the HttpPost component:

import React from 'react'

import HttpPost from './components/HttpPost'
import 'bootstrap/dist/css/bootstrap.min.css';


export default function App() {
  return (
    <div className="App">
      <HttpPost />
    </div>
  )
}

 

Step 6- Run App Development Server

Well, now we have reached the last step of this tutorial where we will run the app development server.

So, we need to open the console and type the below command for running the server:

npm start

 

Conclusion

So friends, in this tutorial we have learned how to use React hooks and Axios to manage asynchronous HTTP post requests in React applications. Hope that you will surely find these steps of implementation quite easy while developing your React app.

 

Thanks