Как получить данные из API с помощью асинхронного ожидания в ReactJS?

В этой статье мы собираемся сделать запрос API к любым API, которые вы хотите использовать ReactJS, и получить данные с помощью асинхронного ожидания. Здесь мы используем что-то под названием Axios, которое является библиотекой в ReactJS.

API: API-интерфейсы — это в основном тип приложения, которое хранит данные в формате JSON (нотация объектов JavaScript) и XML (расширяемый язык разметки). Это позволяет любому устройству общаться друг с другом.

Асинхронное ожидание: Async гарантирует, что функция возвращает обещание и обертывает в него не-обещания. Есть еще одно слово Await, которое работает только внутри асинхронной функции.

Синтаксис ожидания:

const Value = ожидание обещания;

Создание приложения React и установка модуля

Шаг 1: Создайте приложение React, используя следующую команду:

npx create-react-app foldername

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

cd foldername

Шаг 3: После создания приложения ReactJS установите необходимый модуль, используя следующую команду:

npm install axios

Структура проекта: это будет выглядеть следующим образом.

Пример:

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(

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

Примечание. В качестве примера мы будем использовать API https://jsonplaceholder.typicode.com/posts/, который предоставит нам случайные данные. Здесь наша цель — увидеть, что представлено в этих данных. Вы можете заменить его своим API и внести изменения в приложении div. Если мы запустим https://jsonplaceholder.typicode.com/posts/ API на почтальоне, он отобразит данные в формате JSON, как показано ниже: