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

получить данные из 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

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

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

Пример:

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;

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

Шаг для запуска приложения запустите приложение

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

npm start

Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 /, вы увидите следующий вывод:

Читайте также:  Как найти последнее вхождение строки в файловом Linux

Теперь откройте браузер и перейдите по адресу

Оцените статью
bestprogrammer.ru
Добавить комментарий