🔹 Установка Axios

Чтобы использовать Axios, сначала установим его через npm:

npm install axios

Затем импортируем в наш проект:

import axios from "axios";

Axios теперь готов к использованию!

🔹 Основные HTTP-запросы

📌 GET-запрос (получение данных)

Этот метод используется для получения данных с сервера.

axios.get("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => console.log(response.data)) // Выводим данные в консоль
  .catch(error => console.error("Ошибка:", error)); // Ловим и выводим ошибки

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

Отправляем данные на сервер:

axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "Новый пост", // Заголовок поста
  body: "Содержимое поста", // Тело поста
  userId: 1 // ID пользователя
})
  .then(response => console.log("Ответ сервера:", response.data)) // Вывод ответа сервера
  .catch(error => console.error("Ошибка:", error));

📌 PUT-запрос (обновление данных)

PUT полностью заменяет существующие данные.

axios.put("https://jsonplaceholder.typicode.com/posts/1", {
  title: "Обновленный заголовок", // Новый заголовок
  body: "Новое содержимое" // Новое содержимое поста
})
  .then(response => console.log("Обновлено:", response.data))
  .catch(error => console.error("Ошибка:", error));

📌 PATCH-запрос (частичное обновление данных)

PATCH обновляет только указанные поля.

axios.patch("https://jsonplaceholder.typicode.com/posts/1", {
  title: "Частично обновленный заголовок"
})
  .then(response => console.log("Обновлено:", response.data))
  .catch(error => console.error("Ошибка:", error));

📌 DELETE-запрос (удаление данных)

Удаляем данные с сервера:

axios.delete("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => console.log("Удалено:", response.data))
  .catch(error => console.error("Ошибка:", error));

🔹 Обработка ошибок

Axios автоматически перехватывает HTTP-ошибки.

axios.get("https://jsonplaceholder.typicode.com/unknown")
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      // Сервер ответил с ошибкой (4xx, 5xx)
      console.error(`Ошибка ${error.response.status}:`, error.response.data);
    } else if (error.request) {
      // Сервер не ответил
      console.error("Нет ответа от сервера:", error.request);
    } else {
      // Ошибка на стороне клиента
      console.error("Ошибка запроса:", error.message);
    }
  });

🔹 Глобальная настройка Axios

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

const api = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com", // Базовый URL
  timeout: 5000, // Время ожидания 5 секунд
  headers: { "Authorization": "Bearer my-token" } // Добавляем заголовки по умолчанию
});

// Теперь можно использовать api вместо axios
api.get("/posts").then(response => console.log(response.data));

🔹 Перехватчики (Interceptors)

📌 Добавляем токен ко всем запросам

Перехватчик добавляет токен в заголовки перед каждым запросом.

axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer my-token`;
  return config;
}, error => Promise.reject(error));

📌 Перехватчик ответа (например, обработка 401-ошибок)

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response && error.response.status === 401) {
      console.log("Необходима авторизация!");
    }
    return Promise.reject(error);
  }
);

🔹 Отмена запроса (AbortController)

Если нужно отменить запрос, используем AbortController:

const controller = new AbortController();

axios.get("https://jsonplaceholder.typicode.com/posts", { signal: controller.signal })
  .then(response => console.log(response.data))
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log("Запрос отменен");
    } else {
      console.error("Ошибка:", error);
    }
  });

// Отмена запроса через 1 секунду
setTimeout(() => controller.abort(), 1000);

🔹 Использование Axios с async/await

Для упрощения работы с асинхронными запросами используем async/await.

async function fetchData() {
  try {
    const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log(response.data); // Выводим данные в консоль
  } catch (error) {
    console.error("Ошибка запроса:", error); // Ловим ошибки
  }
}

fetchData();

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

• Работа с параметрами запроса:

axios.get("https://jsonplaceholder.typicode.com/posts", {
  params: { userId: 1 }
}).then(response => console.log(response.data));

• Установка заголовков для конкретного запроса:

axios.get("https://jsonplaceholder.typicode.com/posts", {
  headers: { "Custom-Header": "value" }
});