How To Send Asynchronous HTTP GET Request In React
If you are a novice in developing React apps, then it’s quite possible that you don’t know how to get data or fetch records in developing the apps.
But in this tutorial, we will get to know how to send HTTP Get request using the Axios library in React.
First of all, let us understand what HTTP Get request is. HTTP Get requests are sent using the Get method. The primary role of this is to retrieve data from a server using a specific URL.
Get requests are only used to get data in any case. It doesn’t modify or update the data state on the server.
How To Make HTTP Get Request In React Using Axios
Step 1- Install New Project
Step 2- Create REST Server
Step 3- Install Axios Plugin
Step 4- Fetch Data With HTTP Get Method
Step 5- Add Component In App File
Step 6- Run React Server
Step 1- Install React Project
In this first step, we simply have to install or download a new React project by opening the terminal on our system. There, we will use the create-react-project tool by using the following command:
npx create-react-app react-blogFurther, we need to enter into the app through the following command:
cd react-blog
Step 2- Create REST Server
Since we need and API that points towards the server, so in this step, we will create the REST server. This will give us the API or endpoint. With the help of that API, we will be able to receive the data in React component.
Now, let’s install the json-server library:
npm install json-serverWe will create a new db.json file within our app folder. Then, we have to create the profiles object and pour some data into the object in json form:
{
"profiles": [
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
"zipcode": "90566-7771",
"geo": {
"lat": "-43.9509",
"lng": "-34.4618"
}
},
"phone": "010-692-6593 x09125",
"website": "anastasia.net",
"company": {
"name": "Deckow-Crist",
"catchPhrase": "Proactive didactic contingency",
"bs": "synergize scalable supply-chains"
}
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"address": {
"street": "Douglas Extension",
"suite": "Suite 847",
"city": "McKenziehaven",
"zipcode": "59590-4157",
"geo": {
"lat": "-68.6102",
"lng": "-47.0653"
}
},
"phone": "1-463-123-4447",
"website": "ramiro.info",
"company": {
"name": "Romaguera-Jacobson",
"catchPhrase": "Face to face bifurcated interface",
"bs": "e-enable strategic applications"
}
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"address": {
"street": "Hoeger Mall",
"suite": "Apt. 692",
"city": "South Elvis",
"zipcode": "53919-4257",
"geo": {
"lat": "29.4572",
"lng": "-164.2990"
}
},
"phone": "493-170-9623 x156",
"website": "kale.biz",
"company": {
"name": "Robel-Corkery",
"catchPhrase": "Multi-tiered zero tolerance productivity",
"bs": "transition cutting-edge web services"
}
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"address": {
"street": "Skiles Walks",
"suite": "Suite 351",
"city": "Roscoeview",
"zipcode": "33263",
"geo": {
"lat": "-31.8129",
"lng": "62.5342"
}
},
"phone": "(254)954-1289",
"website": "demarco.info",
"company": {
"name": "Keebler LLC",
"catchPhrase": "User-centric fault-tolerant solution",
"bs": "revolutionize end-to-end systems"
}
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"address": {
"street": "Norberto Crossing",
"suite": "Apt. 950",
"city": "South Christy",
"zipcode": "23505-1337",
"geo": {
"lat": "-71.4197",
"lng": "71.7478"
}
},
"phone": "1-477-935-8478 x6430",
"website": "ola.org",
"company": {
"name": "Considine-Lockman",
"catchPhrase": "Synchronised bottom-line interface",
"bs": "e-enable innovative applications"
}
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"address": {
"street": "Rex Trail",
"suite": "Suite 280",
"city": "Howemouth",
"zipcode": "58804-1099",
"geo": {
"lat": "24.8918",
"lng": "21.8984"
}
},
"phone": "210.067.6132",
"website": "elvis.io",
"company": {
"name": "Johns Group",
"catchPhrase": "Configurable multimedia task-force",
"bs": "generate enterprise e-tailers"
}
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"address": {
"street": "Ellsworth Summit",
"suite": "Suite 729",
"city": "Aliyaview",
"zipcode": "45169",
"geo": {
"lat": "-14.3990",
"lng": "-120.7677"
}
},
"phone": "586.493.6943 x140",
"website": "jacynthe.com",
"company": {
"name": "Abernathy Group",
"catchPhrase": "Implemented secondary concept",
"bs": "e-enable extensible e-tailers"
}
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"address": {
"street": "Dayna Park",
"suite": "Suite 449",
"city": "Bartholomebury",
"zipcode": "76495-3109",
"geo": {
"lat": "24.6463",
"lng": "-168.8889"
}
},
"phone": "(775)976-6794 x41206",
"website": "conrad.com",
"company": {
"name": "Yost and Sons",
"catchPhrase": "Switchable contextually-based project",
"bs": "aggregate real-time technologies"
}
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"address": {
"street": "Kattie Turnpike",
"suite": "Suite 198",
"city": "Lebsackbury",
"zipcode": "31428-2261",
"geo": {
"lat": "-38.2386",
"lng": "57.2232"
}
},
"phone": "024-648-3804",
"website": "ambrose.net",
"company": {
"name": "Hoeger LLC",
"catchPhrase": "Centralized empowering task-force",
"bs": "target end-to-end models"
}
}
]
}
Now, we have to start the REST server, -watch tag reload the server when detecting the change in the data object.
On the other hand, -port starts the server on the defined port:
json-server --watch db.json --port=5555
Step 3- Install Axios Plugin
Afterward, we head over to the terminal and again, we will type the new command. This command will help us install the Axios client in React app:
npm install axios
Step 4- Fetch Data With HTTP Get Method
We will receive the data in the component, so we have to create the components/ directory.
Then, we require to create a Profile.js file in components directory. After that, we will copy the code and paste it into the file:
import React, { useState, useEffect } from 'react'
import axios from 'axios'
export default function Profile() {
const API_URI = 'http://localhost:9999/profiles'
const [profile, setProfile] = useState([])
const getProfiles = async () => {
try {
const fetchData = await axios.get(API_URI, {
headers: {
authorization: 'Bearer JWT Token',
},
})
setProfile(fetchData.data)
} catch (error) {
console.log(error)
}
}
useEffect(() => {
window.addEventListener('load', getProfiles)
return () => {
window.removeEventListener('load', getProfiles)
}
}, [profile])
return (
<div className="container mt-4">
<h2 className="mb-4">React Axios HTTP GET Request Example</h2>
{profile.map((res) => {
return (
<li
className="card p-3 mb-2 bg-secondary bg-gradient text-white"
key={res.id}
>
<div className="card-body">
<h5 className="card-title">{res.username}</h5>
<p className="card-text">{res.email}</p>
</div>
</li>
)
})}
</div>
)
}
Step 5- Add Component In App File
In this step, we need to open the App.js file again and import and register the profile component:
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import Profile from './components/Profile.js'
function App() {
return (
<div>
<Profile />
</div>
)
}
export default App;
Step 6- Run React Server
Here, we will type the command on the console and press enter to run the React server:
npm start
Conclusion
So, in this guide, we have seen how to create a React app, create a demo REST server in React.
Also, we have learned how to retrieve data from the server using HTTP Get request.
Thanks