Как отправить HTTP-запрос из React-приложения? Какие библиотеки можно использовать?

Отправка HTTP-запросов в React-приложении — ключевая часть взаимодействия с внешними API. React сам по себе не содержит встроенных средств для сетевых запросов, но ты можешь использовать как нативный fetch, так и сторонние библиотеки вроде axios, SWR, react-query и других. Запросы обычно отправляются внутри хука useEffect, useMutation, useQuery или кастомных хуков.

Способы отправки HTTP-запросов в React

1. Нативный fetch API

fetch — встроенный способ отправки HTTP-запросов в браузере. Он возвращает Promise, поэтому часто используется с async/await.

import { useEffect, useState } from "react";
function Users() {
const \[users, setUsers\] = useState(\[\]);
const \[error, setError\] = useState(null);
useEffect(() => {
async function fetchUsers() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) throw new Error(\`Ошибка: ${response.status}\`);
const data = await response.json();
setUsers(data);
} catch (err) {
setError(err.message);
}
}
fetchUsers();
}, \[\]);
return (
<div>
{error && <p>Ошибка: {error}</p>}
{users.map(user => (
<div key={user.id}>{user.name}</div>
))}
</div>
);
}

fetch требует ручной обработки ошибок (try/catch) и ручной проверки response.ok.

2. Axios

axios — популярная библиотека для HTTP-запросов. Она удобнее fetch, особенно при работе с JSON и перехватчиками (interceptors).

Установка:

npm install axios

Пример:

import axios from 'axios';
import { useEffect, useState } from 'react';
function Users() {
const \[users, setUsers\] = useState(\[\]);
const \[error, setError\] = useState(null);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => setUsers(res.data))
.catch(err => setError(err.message));
}, \[\]);
return (
<div>
{error && <p>Ошибка: {error}</p>}
{users.map(user => (
<div key={user.id}>{user.name}</div>
))}
</div>
);
}

Преимущества axios:

  • Автоматически парсит JSON.

  • Поддержка interceptors (например, для токенов).

  • Удобная работа с params, headers.

  • Унифицированный API для браузера и Node.js.

Библиотеки для управления данными (data fetching + caching)

3. React Query (теперь TanStack Query)

@tanstack/react-query — мощная библиотека для управления асинхронными запросами, кешем, статусами, повторными запросами.

Установка:

npm install @tanstack/react-query

Пример:

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
function Users() {
const { data, isLoading, isError, error } = useQuery({
queryKey: \['users'\],
queryFn: async () => {
const res = await axios.get('https://jsonplaceholder.typicode.com/users');
return res.data;
},
});
if (isLoading) return <p>Загрузка...</p>;
if (isError) return <p>Ошибка: {error.message}</p>;
return (
<div>
{data.map(user => (
<div key={user.id}>{user.name}</div>
))}
</div>
);
}

Преимущества:

  • Кеширование и повторное использование данных.

  • Автоматическое обновление.

  • Работа с mutation, pagination, infinite scroll.

  • Расширенные DevTools.

4. SWR (от Vercel)

SWR (Stale While Revalidate) — легковесная альтернатива React Query от разработчиков Next.js.

Установка:

npm install swr

Пример:

import useSWR from 'swr';
import axios from 'axios';
const fetcher = url => axios.get(url).then(res => res.data);
function Users() {
const { data, error, isLoading } = useSWR('https://jsonplaceholder.typicode.com/users', fetcher);
if (isLoading) return <p>Загрузка...</p>;
if (error) return <p>Ошибка: {error.message}</p>;
return (
<div>
{data.map(user => (
<div key={user.id}>{user.name}</div>
))}
</div>
);
}

SWR автоматически кеширует данные, обновляет их в фоне, перезапрашивает при фокусе на окне и многое другое.

Дополнительные возможности

  • **POST-запрос:
    **
fetch('https://example.com/api', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Alice' })
});

или с axios:

axios.post('https://example.com/api', { name: 'Alice' });
  • **Добавление токена (например, JWT):
    **
axios.defaults.headers.common\['Authorization'\] = \`Bearer ${token}\`;
  • **Отмена запроса (axios):
    **
const controller = new AbortController();
axios.get('/api', { signal: controller.signal });
// Позже:
controller.abort();
  • **Интерсепторы (axios):
    **
axios.interceptors.request.use(config => {
config.headers.Authorization = 'Bearer ' + token;
return config;
});

Где отправлять запрос

  • Внутри useEffect (для fetch и axios) при монтировании компонента.

  • Внутри событий, например onClick, onSubmit.

  • Внутри useQuery / useMutation — при использовании React Query.

  • Внутри useSWR — при использовании SWR.

Популярные библиотеки для работы с HTTP в React

Библиотека Описание
axios Популярный HTTP-клиент, удобный синтаксис, interceptors
--- ---
fetch Нативный API, поддерживается всеми браузерами
--- ---
@tanstack/react-query Мощный инструмент управления данными и кешем
--- ---
swr Лёгкий и быстрый клиент от Vercel
--- ---
ky Маленькая обёртка над fetch с приятным API
--- ---
graphql-request Для GraphQL-запросов
--- ---
apollo-client Полный стек для GraphQL в React-приложениях
--- ---

Практические советы

  • Не делай запросы напрямую в теле компонента — всегда используй хуки.

  • Отделяй логику запроса от UI — можно выносить в кастомные хуки.

  • Обрабатывай ошибки и показывай пользователю результат (isLoading, isError).

  • Избегай утечек памяти: при необходимости используй AbortController или isMounted.

24-07-2025
Easy 12 просмотров