How to handle API calls in a React app using async await

Question

Can i know How to handle API calls in a React app using async/await?

Answer 1

You can handle API calls in a React app using async/await inside the useEffect hook.

Example: Fetching Data with Async/Await

import { useState, useEffect } from "react";

function App() {

    const [data, setData] = useState(null);

    const [loading, setLoading] = useState(true);

    useEffect(() => {

        const fetchData = async () => {

            try {

                const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");

                const result = await response.json();

                setData(result);

            } catch (error) {

                console.error("Error fetching data:", error);

            } finally {

                setLoading(false);

            }

        };

        fetchData();

    }, []);

    return (

        <div>

            {loading ? <p>Loading...</p> : <p>{data?.title}</p>}

        </div>

    );

}

export default App;