Обробка помилок в Axios: детальний гайд для розробників

Axios — це одна з найпопулярніших бібліотек для виконання HTTP-запитів у JavaScript і TypeScript. Вона підтримує роботу з промісами, має гнучку систему інтерцепторів і спрощує взаємодію з API. Однак правильна обробка помилок при використанні Axios — це ключовий момент для створення стабільного та безпечного додатка.

У цій статті ми розглянемо:

• Основи обробки помилок у Axios
• Як працювати з try/catch
• Обробку серверних та клієнтських помилок
• Використання interceptors для централізованої обробки
• Типові помилки та як їх уникнути

1. Основи обробки помилок у Axios

Axios повертає проміси, тому для обробки запитів ми можемо використовувати .then().catch() або try/catch.

Приклад стандартного запиту з .then().catch()

import axios from "axios"; axios.get("https://jsonplaceholder.typicode.com/posts/1") .then((response) => { console.log("Дані отримані:", response.data); }) .catch((error) => { console.error("Помилка запиту:", error); });

Якщо запит успішний, дані будуть виведені в консоль. Якщо станеться помилка — вона буде перехоплена catch().

2. Використання try/catch для обробки помилок

При використанні async/await рекомендується обгортати запити у try/catch.

async function fetchData() {
try {
const response = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
console.log("Дані отримані:", response.data);
} catch (error) {
console.error("Помилка запиту:", error);
}
}fetchData();

Чому це зручно?

• Код виглядає чистішим та зрозумілішим.
• Можна гнучко обробляти помилки у різних блоках catch.

3. Як працює error.response у Axios

При виникненні помилки Axios повертає об’єкт error, який може містити три основні поля:

1. error.response – відповідь сервера (якщо відповідь була отримана).
2. error.request – об’єкт запиту (якщо запит було зроблено, але відповіді не отримано).
3. error.message – загальне повідомлення про помилку.

Приклад обробки різних випадків:

async function fetchData() {
try {
const response = await axios.get("https://jsonplaceholder.typicode.com/invalid-url");
console.log("Дані отримані:", response.data);
} catch (error) {
if (error.response) {
// Сервер відповів з кодом статусу, який виходить за межі 2xx
console.error("Помилка відповіді сервера:", error.response.status);
console.error("Дані помилки:", error.response.data);
} else if (error.request) {
// Запит був зроблений, але відповіді немає
console.error("Помилка запиту, немає відповіді від сервера");
} else {
// Щось ще пішло не так
console.error("Сталася невідома помилка:", error.message);
}
}
}fetchData();

4. Обробка специфічних кодів помилок

Щоб зробити обробку помилок ефективнішою, можна перевіряти HTTP-код відповіді (error.response.status).

Обробка поширених кодів помилок:

async function fetchData() {
try {
const response = await axios.get("https://jsonplaceholder.typicode.com/posts/1000");
console.log("Дані отримані:", response.data);
} catch (error) {
if (error.response) {
switch (error.response.status) {
case 400:
console.error("Помилка 400: Некоректний запит");
break;
case 401:
console.error("Помилка 401: Неавторизований доступ");
break;
case 403:
console.error("Помилка 403: Заборонено");
break;
case 404:
console.error("Помилка 404: Ресурс не знайдено");
break;
case 500:
console.error("Помилка 500: Внутрішня помилка сервера");
break;
default:
console.error("Невідома помилка:", error.response.status);
}
}
}
}fetchData();

5. Використання interceptors для централізованої обробки помилок

Якщо у вас багато запитів, обробка помилок у кожному з них може бути незручною. У таких випадках корисно використовувати інтерцептори.

Додавання глобального інтерцептора помилок:

axios.interceptors.response.use(
(response) => response,
(error) => {
if (error.response) {
console.error(`Помилка ${error.response.status}: ${error.response.data}`);
} else if (error.request) {
console.error("Запит не отримав відповіді від сервера.");
} else {
console.error("Сталася невідома помилка:", error.message);
}
return Promise.reject(error);
}
);

📌 Що це дає?

• Централізована обробка помилок для всіх запитів у проєкті.
• Менше дублювання коду.
• Легке логування помилок.

6. Тайм-аути та повторні спроби

Тайм-аут для запитів

Щоб уникнути зависання запитів, можна встановити тайм-аут.

axios.get("https://jsonplaceholder.typicode.com/posts/1", {
timeout: 5000, // Тайм-аут 5 секунд
})
.then(response => console.log(response.data))
.catch(error => {
if (error.code === 'ECONNABORTED') {
console.error("Час очікування відповіді минув!");
}
});

Повторні спроби при помилках (retry)

За замовчуванням Axios не повторює невдалі запити, але це можна налаштувати через axios-retry.

npm install axios-retry

import axios from "axios";
import axiosRetry from "axios-retry";

// Включаємо повторні спроби
axiosRetry(axios, { retries: 3, retryDelay: axiosRetry.exponentialDelay });

axios.get("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => console.log("Дані:", response.data))
  .catch(error => console.error("Помилка після 3 спроб:", error));

🔄 Що це дає?

• Якщо сервер тимчасово недоступний, запит повториться кілька разів.
• Використовується експоненційна затримка для зменшення навантаження.

Висновок

Axios — потужний інструмент для роботи з API, і правильна обробка помилок робить додаток надійнішим і безпечнішим. Основні моменти, які варто запам’ятати:

1. Використовуйте try/catch або .catch() для обробки помилок.
2. Перевіряйте error.response, error.request та error.message.
3. Обробляйте коди статусів для точнішої діагностики помилок.
4. Використовуйте interceptors для централізованої обробки помилок.
5. Налаштовуйте тайм-аути та повторні спроби для підвищення надійності.

Правильний підхід до обробки помилок забезпечує кращий користувацький досвід та допомагає уникати несподіваних збоїв у роботі додатку.