Почти каждое приложение взаимодействует с сервером: загрузка данных пользователей, отправка сообщений, получение списка товаров. Всё это делается через запросы к API. Сегодня мы разберём, как отправлять такие запросы в React с помощью Fetch и Axios, а также создадим простой компонент, который загружает список пользователей с API и отображает их на странице.

Навигация по статье

Как делать запросы к серверу

Запросы к серверу в JavaScript — это асинхронная операция. Вы отправляете запрос, ждёте ответа (иногда долго), а затем обрабатываете полученные данные. В JavaScript для работы с асинхронными запросами используются:

fetch — встроенный в браузер метод.
Axios — популярная библиотека с улучшенной функциональностью для работы с HTTP-запросами.

Основные этапы работы с API

Отправка запроса: Вы отправляете запрос с помощью fetch или Axios.
Ожидание ответа: Сервер возвращает данные, обычно в формате JSON.
Обработка данных: Вы преобразуете JSON в объект и используете его в приложении.

Использование Fetch в React

fetch — это встроенный метод для работы с HTTP-запросами. Вот как он работает:

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Ошибка:', error);
  });

В данном примере мы используем метод fetch для отправки GET-запроса на сервер. После получения ответа преобразуем его в формат JSON с помощью response.json() и обрабатываем полученные данные.

Пример: базовый запрос с Fetch

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json()) // Преобразуем ответ в JSON
  .then((data) => console.log(data))  // Работаем с данными
  .catch((error) => console.error('Ошибка:', error));

Плюсы Fetch

Встроен в браузер, не требует установки.
Прост для базовых операций.

Минусы Fetch

Не обрабатывает ошибки HTTP-ответов (например, код 404 или 500). Их нужно обрабатывать вручную.
Меньше возможностей из коробки (например, отмена запроса).

Использование Axios в React

Axios — это популярная библиотека для работы с API. Она делает запросы проще и удобнее. Перед использованием установите её:

npm install axios

Пример: базовый запрос с Axios

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/users')
  .then((response) => console.log(response.data)) // Данные находятся в response.data
  .catch((error) => console.error('Ошибка:', error));

Плюсы Axios

Автоматически обрабатывает ошибки HTTP-ответов.
Удобно работает с JSON по умолчанию.
Поддерживает отмену запросов и настройку заголовков.

Минусы Axios

Нужно устанавливать библиотеку.
Больше кода для настройки.

Обработка асинхронных операций в React

В React запросы к серверу чаще всего отправляются в хуке useEffect, который запускается при монтировании компонента. Это позволяет загружать данные, как только компонент появляется на странице.

Как работать с асинхронным кодом в React

Использование useEffect: Помещаем запрос внутрь эффекта, чтобы он выполнялся только при монтировании.
Работа с состоянием: Храним данные в состоянии с помощью useState.
Обработка ошибок: Обязательно добавляем обработку ошибок, чтобы избежать сбоев.

Пример

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState('');

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => setUsers(response.data))
      .catch((error) => setError('Ошибка загрузки данных'));
  }, []);

  return (
    <div>
      {error ? <p>{error}</p> : <ul>{users.map((user) => <li key={user.id}>{user.name}</li>)}</ul>}
    </div>
  );
}

export default App;

Практика: список пользователей

Теперь создадим полноценное приложение, которое загружает и отображает список пользователей с публичного API.

Шаг 1: Настройка проекта

Убедитесь, что у вас установлен React и Axios:

npm install react-router-dom axios

Шаг 2: Создание компонента

В App.jsx добавьте следующий код:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UsersList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    // Загружаем данные
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        setUsers(response.data); // Сохраняем данные в состояние
        setLoading(false);      // Убираем индикатор загрузки
      })
      .catch(() => {
        setError('Не удалось загрузить пользователей');
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Загрузка...</p>;
  }

  if (error) {
    return <p>{error}</p>;
  }

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Список пользователей</h1>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {users.map((user) => (
          <li key={user.id} style={{ marginBottom: '10px', padding: '10px', border: '1px solid #ddd', borderRadius: '5px' }}>
            <p><strong>Имя:</strong> {user.name}</p>
            <p><strong>Email:</strong> {user.email}</p>
            <p><strong>Телефон:</strong> {user.phone}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default function App() {
  return <UsersList />;
}

Разбираем код

Состояния

users хранит массив пользователей.
loading показывает, загружаются ли данные.
error хранит текст ошибки, если что-то пошло не так.

useEffect

Отправляем запрос при монтировании компонента.
Сохраняем данные или ошибку в состоянии.

Отображение данных

Пока идёт загрузка, показываем текст «Загрузка…».
Если произошла ошибка, показываем сообщение об ошибке.
После успешной загрузки отображаем список пользователей.

Axios

Используем axios.get для запроса.
Удобно работать с response.data, где лежат нужные данные.

Шаг 3: Запуск проекта

Запустите проект:

npm run dev

Откройте приложение в браузере. Вы увидите список пользователей с их именами, email и телефонами.

Итоги

Сегодня мы разобрали:

Как делать запросы к серверу: с помощью Fetch и Axios.
Обработку асинхронных операций: используя useEffect и состояние.
На практике создали компонент, который загружает список пользователей и отображает их на странице.

Fetch или Axios?

Выбор зависит от задач:

Fetch подходит для простых запросов.
Axios удобнее для сложных сценариев (настройка заголовков, обработка ошибок).