Open In App
Related Articles

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

Improve Article
Save Article
Like Article

Fetching data from an API in ReactJS is a common and crucial task in modern web development. Fetching data from API helps in getting real-time updates dynamically and efficiently. API provides on-demand data as required rather than loading all data.



To fetch data from APIs using Asynchronous await in ReactJS we will make an API request. Fetching data is an asynchronous process which means it does not update instantly and takes time to fetch the data. The await keyword enables the assignment to state le when data is available and is completely fetched.


APIs are basically a type of application that stores 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.


const fun = async () => {
const value = await promise;

Steps to create React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: Move to the project directory using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm i axios

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

Example: This example creates async function and use await to use data when it is completely fetched.


// Filename: 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.

            // Await make wait until that
            // promise settles and return its result
            const response = await axios.get(

            // After fetching data stored it in posts state.

            // Closed the loading page

        // Call the function
    }, []);

    return (
            <div className="App">
                {loading ? (
                ) : (
           => (
                        // Presently we only fetch
                        // title from the API

export default App;

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:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 06 Nov, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials