Fetch и Axios в React: как потреблять REST API

API (Application Programming Interface) — это набор правил и протоколов, позволяющих приложению отправлять запросы на сервер и получать ответы. Простыми словами: API даёт готовые «строительные блоки», которые ваше приложение может использовать вместо того, чтобы реализовывать функциональность с нуля.

В этом руководстве вы реализуете простое React-приложение, которое получает случайный факт о кошках из публичного REST API при нажатии кнопки. Вы увидите два способа: Fetch (встроенный в браузер) и Axios (внешняя библиотека).

Почему это важно

• Экономия времени: не нужно реализовывать сложную логику заново.
• Модульность: легко заменять источник данных или переключаться между реализациями.
• Практическое знание: почти любое приложение на проде взаимодействует с API.

Основные варианты использования (ключевой запрос и варианты)

Primary intent: потреблять REST API в React Related intents: получить данные через Fetch, получить данные через Axios, примеры использования useEffect и useState, как обрабатывать ошибки HTTP

Типы API — кратко

APIs классифицируют по доступности или назначению:

• По доступности: публичные, приватные, партнерские, составные.
• По назначению: баз данных, удалённые сервисы, API ОС, веб-API.

В этой статье мы работаем с веб-API типа REST (Representational State Transfer). REST API обычно возвращают ресурсы по URL в формате JSON.

Требования

• Базовый JavaScript.
• Знание React и хуков (useState, useEffect).
• Установленный npm/yarn.
• Текстовый редактор / IDE.

Создание React-приложения

Откройте терминал и выполните:

npx create-react-app catfact

Откройте папку catfact в редакторе и очистите лишний код в src/App.js.

Простейший UI для примера (App.js):

import "./App.css";

function App() {
  return (
    

      
Нажмите кнопку, чтобы получить случайный факт о кошках!
      

      Get Cat fact
    
  );
}

export default App;

CSS (App.css) для внешнего вида:

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@700;500&display=swap');
.App {
  font-family: 'Playfair Display', serif;
  margin: 20px 15vw;
}
h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 3em;
}
button {
  padding: 1em 1.2em;
  border: none;
  font-size: 1em;
  background-color: #131212;
  color: #ffffff;
  border-radius: 0.5em;
  cursor: pointer;
}
button:hover{
  background-color:#3b3b3b;
}

В браузере приложение должно выглядеть примерно так:

Далее мы организуем логику запроса и состояния.

Потребление REST API с помощью Fetch

Коротко: Fetch — это встроенный интерфейс браузера для отправки HTTP-запросов. fetch(url) возвращает Promise, который вы можете обработать.

Простой синтаксис:

fetch('url-to-resource')
  .then(response => /* обработать response */)
  .catch(err => /* обработать ошибку */)

Пример с реальным API (catfact.ninja):

fetch("https://catfact.ninja/fact")
  .then(response => response.json())
  .then(data => /* использовать data */)
  .catch(err => /* обработать ошибку */)

Реализация в React (Fetch + хуки)

1. Подключите хуки useState и useEffect.

import { useEffect, useState } from 'react';

2. Создайте состояние fact и функцию для его обновления:

const [fact, setFact] = useState('');

3. Реализуйте функцию fetchFact и вызовите её в useEffect, чтобы получить факт при загрузке компонента:

const fetchFact = () => {
  fetch("https://catfact.ninja/fact")
    .then((response) => response.json())
    .then((data) => setFact(data.fact))
    .catch((err) => console.error('Fetch error:', err));
};

useEffect(() => {
  fetchFact();
}, []);

4. Добавьте обработчик клика, чтобы получать новый факт по кнопке:

const handleClick = () => {
  fetchFact();
};

Get Cat fact
{fact}

Итоговый App.js с Fetch:

import "./App.css";
import { useEffect, useState } from "react";

function App() {
  const [fact, setFact] = useState("");

  const fetchFact = () => {
    fetch("https://catfact.ninja/fact")
      .then((response) => response.json())
      .then((data) => setFact(data.fact))
      .catch((err) => console.error('Fetch error:', err));
  };

  useEffect(() => {
    fetchFact();
  }, []);

  const handleClick = () => {
    fetchFact();
  };

  return (
    

      
Нажмите кнопку, чтобы получить случайный факт о кошках!
      

      Get Cat fact
      
{fact}
    
  );
}

export default App;

После этого приложение покажет случайный факт при загрузке и будет загружать новый факт по нажатию кнопки.

Потребление REST API с помощью Axios

Axios — это популярная библиотека HTTP-клиента. Он упрощает работу с запросами: автоматически парсит JSON, предоставляет удобные методы и поддержку отмены/интерсепторов.

Ключевые отличия:

• Axios автоматически отдаёт данные в виде JSON (response.data).
• Axios требует только одного .then(), тогда как Fetch обычно нужно два шага (response.json()).
• Axios предоставляет интерцепторы для обработки ошибок/авторизации в одном месте.

Установка и использование

Установите Axios:

npm install axios

Импорт и использование в компоненте:

import axios from 'axios';

const fetchFact = () => {
  axios.get("https://catfact.ninja/fact")
    .then((response) => {
      setFact(response.data.fact);
    })
    .catch((err) => console.error('Axios error:', err));
};

Axios также легко использовать с async/await:

const fetchFactAsync = async () => {
  try {
    const response = await axios.get("https://catfact.ninja/fact");
    setFact(response.data.fact);
  } catch (err) {
    console.error('Axios async error:', err);
  }
};

Когда Fetch полезен, а когда лучше Axios

• Fetch подходит для простых запросов и когда вы не хотите добавлять внешние зависимости.
• Axios удобен для сложных сценариев: добавление заголовков/токенов, отмена запросов, глобальная обработка ошибок, прогресс загрузки.

Ниже — краткая сравнение по задачам:

• Простота: Fetch — встроенный, меньше зависимостей.
• Параметры/интерсепторы: Axios лучше.
• Поддержка старых браузеров: Axios покрывает больше окружений из коробки.

Практические рекомендации и шаблоны

1. Используйте async/await внутри useEffect через вложенную функцию:

useEffect(() => {
  let isMounted = true;

  const load = async () => {
    try {
      const res = await fetch('https://catfact.ninja/fact');
      const json = await res.json();
      if (isMounted) setFact(json.fact);
    } catch (err) {
      console.error(err);
    }
  };

  load();
  return () => { isMounted = false; };
}, []);

2. Обработка состояния загрузки и ошибок:

const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const fetchFact = async () => {
  setLoading(true);
  setError(null);
  try {
    const res = await fetch('https://catfact.ninja/fact');
    const json = await res.json();
    setFact(json.fact);
  } catch (err) {
    setError('Не удалось загрузить факт');
  } finally {
    setLoading(false);
  }
};

3. Отмена запросов при размонтировании (Axios пример):

useEffect(() => {
  const source = axios.CancelToken.source();
  axios.get('https://catfact.ninja/fact', { cancelToken: source.token })
    .then(res => setFact(res.data.fact))
    .catch(err => {
      if (axios.isCancel(err)) console.log('Request canceled');
      else console.error(err);
    });
  return () => source.cancel();
}, []);

Альтернативы и шаблоны (когда лучше не использовать «голый» Fetch/axios)

• React Query / TanStack Query — кеширование, автоматический рефетч, фоновое обновление, повтор при ошибке.
• SWR — лёгкая библиотека для кеширования и рефетча.
• GraphQL-клиенты (Apollo, Urql) — если API предоставляет GraphQL.

Выбор: если вам нужно сложное кеширование, фоновые обновления и управление состоянием запросов — используйте React Query. Для простых запросов и небольших приложений хватит Fetch или Axios.

Ментальные модели и эвристики

• «Single source of truth»: храните состояние ответа там, где компонент или контекст могут корректно его использовать.
• «Keep UI responsive»: показывайте индикатор загрузки и вежливый текст при ошибках.
• «Fail fast and inform»: логируйте ошибки и показывайте человеку понятные сообщения.

Безопасность и конфиденциальность

• Никогда не храните секретные ключи в коде клиента. Используйте сервер-прокси или environment variables на бэкенде.
• Для приватных API применяйте авторизацию (Bearer токены, OAuth) и обновление токенов через безопасный сервер.
• Обезопасьте CORS: на проде настраивайте допустимые источники.
• Если передаёте персональные данные, проверьте требования локального законодательства и GDPR, применяйте минимизацию данных и шифрование в транзите (HTTPS).

Ролевые чек-листы

Разработчик:

• Проверить работу в нескольких браузерах.
• Обработать состояния loading / error / empty.
• Не хранить секреты в клиентском коде.

Код-ревьюер:

• Есть ли тесты на обработку ошибок?
• Корректно ли очищаются подписки и запросы при unmount?
• Нет ли лишних перерендеров?

Тестировщик:

• Симулировать медленное соединение.
• Проверить поведение при 4xx/5xx ошибках.
• Проверить отмену запросов при уходе со страницы.

Критерии приёмки

• Компонент успешно загружает и отображает факт при старте.
• При клике на кнопку загружается новый факт.
• Есть отображение состояния загрузки и читабельное сообщение об ошибке.
• При размонтировании компонента отменяются активные запросы.

Мини-методология: быстрый чек-лист внедрения API

1. Прототип: попробовать запрос в Postman/Insomnia.
2. Лёгкий клиент: реализовать Fetch/axios для показа данных.
3. Обработка: добавить состояния loading/error.
4. Тесты: юнит/интеграция на обработку ошибок.
5. Рефакторинг: вынести запросы в сервисные модули или использовать React Query.

Когда подход может не сработать (контрпримеры)

• Если API возвращает большие объёмы данных без пагинации — клиент может упасть.
• Если нужен офлайн-доступ и сложное кеширование — лучше использовать специализированные инструменты.
• Если требуется атомарная согласованность транзакций на стороне сервера — REST-запросы могут быть недостаточны.

Примеры тест-кейсов и приёмки

• При нормальном ответе отображается факт.
• При ошибке сети показывается сообщение «Не удалось загрузить факт».
• При медленном соединении виден индикатор загрузки.
• При навигации со страницы запрос отменяется и не приводит к setState на размонтированном компоненте.

Шпаргалка (cheat sheet)

• fetch(url) → необходимо response.json()
• axios.get(url) → response.data
• Используйте async/await для читаемости
• Обрабатывайте loading и error
• Отменяйте запросы при unmount

Поток принятия решений (Mermaid)

flowchart TD
  A[Нужно просто получить данные?] -->|Да| B{Есть необходимость кеширования?}
  B -->|Нет| C[Использовать Fetch или Axios]
  B -->|Да| D[Использовать React Query или SWR]
  A -->|Нет| E[Нужны сложные сценарии: транзакции, офлайн]
  E --> F[Рассмотреть архитектуру с бэкендом или P2P решения]

Итог и рекомендации

• Для простых задач отлично подойдет Fetch. Он встроен и не требует зависимостей.
• Для продакшн-приложений с авторизацией, интерцепторами и сложной обработкой ошибок удобнее Axios.
• Для кеширования, фонового обновления и синхронизации состояния используйте React Query или SWR.
• Всегда обрабатывайте загрузку и ошибки, не храните секреты в клиенте и заботьтесь о безопасности данных.

Краткое резюме:

• Реализуйте fetch/axios как отдельную функцию или сервис.
• Добавьте состояние loading/error.
• Обработайте отмену запросов при размонтировании.
• Оцените потребности кеширования и наблюдайте за производительностью.

Дополнительно: используйте браузерные инструменты (DevTools, Network) и тесты, чтобы убедиться в корректной работе.

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