Making HTTP requests with Axios Library in React to perform CURD Operation
Axios Library
Axios is a Javascript library that allows you to connect with backend API and manage requests made via the HTTP protocol. Axios helps developers make HTTP requests from NodeJS or XMLHttpRequests from a browser. If the request is successful, you will receive a response with the data requested. If the request fails, you will get an error.
Axios is a promise-based HTTP library that?lets developers make requests to either their server or a third-party server to fetch data. It offers different ways of making requests such as GET, POST, PUT/PATCH, and DELETE. This library is very useful to perform CURD operations.
Features of Axios Library
Using Axios we make API requests in our application. Once the request is made, we get the data in return, and then we use this data in our project.
How to use it?
Step:1
Install axios in our react project by using NPM (node package manager).
“npm install axios”
Step:2
Import the axios library in your src file (i.e. app.js).
import axios from "axios";
GET Request
We can write code for GET data from the database using API.
axios.get("https://jsonplaceholder.typicode.com/users/1")
. then((response) => {console.log(response);})
????????????????????????????????????? . catch((err) => console.log(err));
This code sends a?GET?request to the JSON API. Because the request returns a promise, we use the .then()?block to handle the responses. We also need to use the?.catch()?method to log any errors to the console.
POST Request
A?POST?request is a little different because you often need to pass some data in the request to the server. In the sample application, we have a?POST?request that creates a user and passes in details for that user. The code snippet for the request looks like this:
axios.post ("https://jsonplaceholder.typicode.com/users", {id: 11, name: "Tom Brady", username: "Brad", email: "[email protected]",})
. then((response) => console.log(response))
???????????????????????????????????????? . catch((err) => console.log(err));
The Axios?POST?request uses an object after the request URL to define the properties you want to create for your user. Once the operation has been completed, there will be a response from the server.?
PUT Request
A PUT request is for updating data in your database by using the id of the object. The request is passed to the server it first GET the data by using ID and we can make changes in the data and PUT the data to the server. Here we can make two requests to the server. First GET the data and make changes PUT the data to the server
axios.get("https://jsonplaceholder.typicode.com/users/"+id)
??????????????????????????? . then((response)=>console.log(response))
??????????????????????????? . catch((err)=>console.log(err));?
Get the data by using the ID from the server.
axios.put ("https://jsonplaceholder.typicode.com/users/” +id, {Id,name,username,email,})
. then((response)=>console.log(response))
????????????????????????????????????????? . catch((err)=>console.log(err));?
Here we can use pass data in the request to the server to make changes.
DELETE Request
A DELETE request is to delete the data from the server using the id of the object.
axios.get("https://jsonplaceholder.typicode.com/users/"+id)
. then((response)=>console.log(response))
????????????????????????????????????????? . catch((err)=>console.log(err));