Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 09 Jul, 2021

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 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

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 reult
            const response = await axios.get(
  
            // 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :