How to fetch data from APIs using Asynchronous await in ReactJS ? - GeeksforGeeks

14 Apr, 2022
In this article, we are going to make an API request to any APIs that you want using ReactJS, and fetch data using Asynchronous await. Here we are using something called Axios which is a library in ReactJS.
API: APIs are basically a type of application that stored data in the format of JSON (JavaScript Object Notation) and XML (Extensible Markup Language). It makes it possible for any device to talk to each other.
Asynchronous Await: Async ensures that the function returns a promise and wraps non-promises in it. There is another word Await, that works only inside the async function.
Await Syntax:
const Value = await promise;
 
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e foldername, move to it using the following command:cd foldername
Step 2: After creating your project folder i.e foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:npm install axios
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install axios
reult
Project Structure: It will look like the following.
Project Structure
Example:
App.js
import React, { useState, useEffect } from 'react'import axios from 'axios';  function App() {      const [loading, setLoading] = useState(false);    const [posts, setPosts] = useState([]);      useEffect(() => {        const loadPost = async () => {              // Till the data is fetch using API             // the Loading page will show.            setLoading(true);              // Await make wait until that             // promise settles and return its result            const response = await axios.get(            "https://jsonplaceholder.typicode.com/posts/");              // After fetching data stored it in posts state.            setPosts(response.data);              // Closed the loading page            setLoading(false);        }          // Call the function        loadPost();    }, []);      return (        <>            <div className="App">                {loading ? (                    <h4>Loading...</h4>) :                    (posts.map((item) =>                        // Presently we only fetch                         // title from the API                         <h4>{item.title}</h4>)                    )                }            </div>        </>    );}  export default App;
Note: As an example, we would use the API https://jsonplaceholder.typicode.com/posts/ which would give us random data. Here our goal is to see what is presented in this data. You can replace it with your API and make changes in the div App. If we run https://jsonplaceholder.typicode.com/posts/ API on postman, it will show data in JSON format as shown below:
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
sumitgumber28
React-Questions
Web-API
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set background images in ReactJS ?
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
React-Router Hooks
ReactJS useNavigate() Hook
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript