Настройка Axios и отправка базовых запросов — аналогия с fetch

Главные преимущества Axios:

1. Удобство работы с базовыми URL-адресами: установите всего один раз глобальный базовый URL для всех запросов. Больше никаких копипастов.

2. Обработка заголовков: Axios позволяет легко добавлять HTTP-заголовки и управлять ими.

3. Автоматическое преобразование данных: Axios автоматом преобразует данные ответа сервера в JSON (да, без JSON.parse()).

4. Перехватчики (Interceptors): вы можете настроить перехватчики для обработки запросов и ответов (например, добавить токен в заголовки всех запросов или централизованно обрабатывать ошибки).

5. Поддержка старых браузеров: Axios работает даже там, где fetch не поддерживается (намёк на Internet Explorer).

Это лишь верхушка айсберга, но уже достаточно, чтобы захотеть попробовать.

Установка и настройка Axios

Давайте добавим Axios в наш проект. Это так же просто, как npm и 1 команда.

Для начала установим библиотеку в наш проект. Откройте терминал и выполните:

npm install axios

Эта команда добавит Axios в ваш проект.

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

Создаём экземпляр Axios

Вы можете создать свой экземпляр Axios, закрепив базовый URL и общие настройки:

// services/axiosClient.ts
import axios from "axios";

const axiosClient = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com", // Базовый URL для всех запросов
  headers: {
    "Content-Type": "application/json", // Устанавливаем общий заголовок
  },
});

export default axiosClient;

Теперь мы можем использовать этот экземпляр везде в проекте, и нам не нужно каждый раз задавать базовый URL или заголовки.

Отправка базовых запросов с Axios

Как говорится, теория теорией, а картофель нужно чистить руками. Пора попробовать замешать Axios в наш проект. Разберём примеры для основных HTTP-методов: GET, POST, PUT и DELETE.

GET-запрос

Начнем с любимицы фронтенд-разработчиков — GET. Скачем за данными с сервера:

// services/todoService.ts
import axiosClient from "./axiosClient";

// Функция для получения списка задач
export const getTodos = async () => {
  try {
    const response = await axiosClient.get("/todos"); // Запрос к API
    return response.data; // Возвращаем только данные
  } catch (error) {
    console.error("Ошибка при загрузке TODOs:", error);
    throw error;
  }
};

Теперь добавим её в наш компонент:

// components/TodoList.tsx
import React, { useEffect, useState } from "react";
import { getTodos } from "../services/todoService";

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<any[]>([]);

  useEffect(() => {
    const fetchTodos = async () => {
      try {
        const data = await getTodos(); // Выполняем GET-запрос
        setTodos(data); // Сохраняем данные в состояние
      } catch (error) {
        console.error("Ошибка загрузки списка задач:", error);
      }
    };

    fetchTodos();
  }, []);

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

export default TodoList;

Ваш браузер наполнится списком задач. Элементарно!

POST-запрос

Для отправки данных на сервер используем метод POST. Допустим, мы хотим добавить новую задачу:

// services/todoService.ts
export const createTodo = async (title: string) => {
  try {
    const response = await axiosClient.post("/todos", { title }); // Отправляем данные в теле запроса
    return response.data;
  } catch (error) {
    console.error("Ошибка при создании TODO:", error);
    throw error;
  }
};

Используем в компоненте:

// components/AddTodo.tsx
import React, { useState } from "react";
import { createTodo } from "../services/todoService";

const AddTodo: React.FC = () => {
  const [title, setTitle] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      const newTodo = await createTodo(title); // POST-запрос
      console.log("Создана новая задача:", newTodo);
    } catch (error) {
      console.error("Ошибка создания задачи:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
      />
      <button type="submit">Добавить задачу</button>
    </form>
  );
};

export default AddTodo;

PUT-запрос

Следующим шагом изменим существующую задачу. Например, отметим её как выполненную:

// services/todoService.ts
export const updateTodo = async (id: number, completed: boolean) => {
  try {
    const response = await axiosClient.put(`/todos/${id}`, { completed });
    return response.data;
  } catch (error) {
    console.error("Ошибка при обновлении TODO:", error);
    throw error;
  }
};

DELETE-запрос

Удалять задачи тоже просто:

// services/todoService.ts
export const deleteTodo = async (id: number) => {
  try {
    const response = await axiosClient.delete(`/todos/${id}`);
    return response.data;
  } catch (error) {
    console.error("Ошибка при удалении TODO:", error);
    throw error;
  }
};

Сравнение с fetch

Если сравнивать с fetch, у Axios видны явные преимущества:

• Удобный синтаксис: никаких долгих преобразований JSON.
• Умная обработка заголовков и базового URL.
• Поддержка перехватчиков для централизованного управления.
• Гибкая обработка ошибок.

Однако fetch всё ещё остаётся мощным инструментом, особенно если вы предпочитаете минимализм. Иногда можно использовать их вместе: fetch для небольших запросов, Axios — для сложных проектов.

Теперь вы не только научились работать с Axios, но и поняли, как эффективно интегрировать его в React-приложение. В следующей лекции мы разберём обработку ошибок и особенности их типизации.

1

Задача

Модуль 3: React, 11 уровень, 5 лекция

Недоступна

Получение данных с использованием Axios

Получение данных с использованием Axios

Открыть

1

Задача

Модуль 3: React, 11 уровень, 5 лекция

Недоступна

Отправка данных на сервер (POST-запрос)

Отправка данных на сервер (POST-запрос)

Открыть