В этом блоге мы узнаем, как получать и отображать данные из API и использовать их в приложении ReactJS. Существует несколько способов получения данных в приложении React, и мы расскажем вам об этом. эти методы. С помощью API мы можем получать данные с серверов и отображать их в нашем приложении. Давайте сначала разберемся, что такое API.
- Метод Fetch:Метод fetch() в JavaScript используется для запроса данных с сервера. Запрос может относиться к API любого типа, который возвращает данные в формате JSON или XML. Метод fetch() требует один параметр — запрашиваемый URL-адрес и возвращает обещание.
import React, { useEffect, useState } from "react"; function App() { const [user, setUser] = useState([]); const fetchData = () => { return fetch("https://api.example.com/users") .then((response) => response.json()) .then((data) => setUser(data)); } useEffect(() => { fetchData(); },[]) return ( <main> <h1>User List</h1> <ul> {user && user.length > 0 && user.map((userObj, index) => ( <li key={userObj.id}>{userObj.name}</li> ))} </ul> </main> ); } export default App;
- Axios.Axios – популярная сторонняя библиотека для выполнения HTTP-запросов. Это упрощает процесс отправки запросов и обработки ответов. Он также предоставляет такие функции, как перехватчики и автоматический анализ JSON.
import axios from 'axios'; async function fetchData() { try { const response = await axios.get("https://api.example.com/users") setUser(response.data) } catch (error) { console.error(error); } } useEffect(() => { fetchData(); },[])
- Async/Await с помощью Fetch или Axios. Вы можете использовать современный синтаксис async/await, чтобы сделать код более читабельным при работе с асинхронными операциями. Это можно сделать как с помощью Fetch API, так и с помощью Axios.
async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); // Handle data } catch (error) { // Handle error } }
Хук useEffect в React: Хук useEffect обычно используется для получения данных при монтировании компонента или при изменении определенных зависимостей. Вы можете использовать Fetch API, Axios или любой другой метод получения данных в функции useEffect.
npm i react-fetch-hook import useFetch from "react-fetch-hook" const {data} = useFetch("https://jsonplaceholder.typicode.com/users"); console.log(data); import { useEffect, useState } from "react"; import axios from "axios"; const useFetch = (method, url, body) => { const [isLoading, setIsLoading] = useState(false); const [apiData, setApiData] = useState([]); const [apiError, setApiError] = useState(''); useEffect(() => { setIsLoading(true); const fetchData = async () => { try { const response = await axios({ method: method, url: url, data: body }); const data = await response?.data; setApiData(data); setIsLoading(false); } catch (error) { setApiError(error); setIsLoading(false); } }; fetchData(); }, [url, method, body]); return { isLoading, apiData, apiError }; }; export default useFetch; App.js import useFetch from "../src/useFetch"; function App() { const { isLoading, apiError, apiData } = useFetch( "GET", "https://api.example.com/users", {} );
- React Query и SWR (устаревшие при повторной проверке): это сторонние библиотеки, предназначенные для упрощения получения данных и управления состоянием в приложениях React. Они предлагают такие функции, как кэширование, автоматическая повторная выборка и многое другое, что упрощает управление сложными сценариями получения данных.
import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (isLoading) return <div>loading…</div> return <div>hello {data.name}!</div> }
В этом примере перехватчик useSWR принимает строку ключа и функцию выборки. Ключ — это уникальный идентификатор данных (обычно URL-адрес API), который будет передан сборщику. Сборщиком может быть любая асинхронная функция, возвращающая данные. Вы можете использовать встроенную выборку или такие инструменты, как Axios.
Хук возвращает 3 значения: данные, isLoading и ошибку, в зависимости от статуса запроса.
Желаем вам приятных впечатлений и увидимся в следующий раз! 🐈⬛