Делай запросы в React современно

Существует несколько способов получения данных в React приложении. В этой статье обзорно посмотрим какие.

Начнем с классического Fetch. API Fetch – это встроенный в браузер API для получения ресурсов, включая данные с сервера. Он возвращает Promise, который разрешается в объект ответа. Вы можете использовать API Fetch в сочетании с хуком useEffect в React для получения данных и обновления состояния компонента.

import { useState, useEffect } from 'react'; const Component = () => { const [data, setData] = useState([]); useEffect(() => { fetch('/api/some/url') .then(response => response.json()) .then(data => setData(data)) .catch(error => console.error(error)); }, []); return ( <div> <h1>Список полученных данных:</h1> <ul> {data.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); }

Axios - популярная библиотека для выполнения HTTP-запросов из браузера или среды Node.js. Она возвращает Promise, который разрешается в объект ответа. Вы можете использовать Axios в сочетании с хуком useEffect в React для получения данных и обновления состояния компонента.

import { useState, useEffect } from 'react'; import axios from 'axios'; const Component = () => { const [data, setData] = useState([]); useEffect(() => { axios.get('/api/some/url') .then(response => setData(response.data)) .catch(error => console.error(error)); }, []); return ( <div> <h1>Список полученных данных:</h1> <ul> {data.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); }

И наконец есть отличная библиотека react-query, которая отлично подойдет для работы с данными

import { useQuery } from 'react-query'; const Component = () => { const { isLoading, error, data } = useQuery(' data', () => fetch('/api/some/url').then((res) => res.json() ) ); if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return ( <div> <h1>Users</h1> <ul> {data.map((item) => ( <li key={item.id}>{item.content}</li> ))} </ul> </div> ); }

Прелесть в том, что мы можем совмещать работы react-query с другими способами, но при этом получим возвращаемые библиотекой данные из запроса и его состояние. Убирается лишний код, который отслеживает состояние запросы, сразу опираемся на isLoading в построении нашего UI.

Статья обзорно показывает способы получения данных с помощью запросов. Я намеренно не брал другие способы и, как показывает практика, react-query сильно упрощает жизнь при написании однотипного кода в сравнении с другими способами, когда не обкладываешься кучей условий и экшенов для отслеживания состояния запроса.

Если понравилась история, то подпишись на мой Телеграм канал

Делай запросы в React современно

Fetch

Axios

React-query

Итого