Получение кода статуса из HTTP ошибки в Axios

Быстрый ответ

Для получения кода состояния при HTTP-ошибках в Axios обращайтесь к свойству error.response.status в блоке .catch():

axios.get('your/api/endpoint')
  .catch(error => console.log(error.response?.status));

Такой пример кода поможет предотвратить возникновение необработанных исключений и облечь в форму контроль над ошибками в вашем приложении.

Разгоняем туман: Упрощаем обработку ошибок

Обработка HTTP-запросов требует умения классифицировать, диагностировать и адекватно реагировать на ошибки. Давайте разберемся с ошибками поподробнее, структурируя информацию в блоке .catch():

axios.get('your/api/endpoint')
  .then(response => /* Успешно! */)
  .catch(error => {
    if (error.response) {
      // Сервер ответил, но что-то пошло не так (статус-коды вне диапазона 2xx)
      console.log('Статус:', error.response.status); // статус ответа сервера
      console.log('Тело ответа:', error.response.data); // содержимое ответа сервера
      console.log('Заголовки:', error.response.headers); // заголовки ответа
    } else if (error.request) {
      // Запрос отправлен, но ответ не получен
      console.log(error.request);
    } else {
      // Проблема с формированием запроса на стороне клиента
      console.log('Ошибка:', error.message); // Сообщение об ошибке
    }
    console.log(error.config); // Посмотрим на конфигурацию запроса
  });

Такая структуризация обработки ошибок в Axios обеспечивает их четкую классификацию и облегчает процесс отладки.

Подаем смесь JavaScript паттернов

Глубокое погружение в понимание ошибок

Серверное сообщение, находящееся в error.response.data, — это крайне важный источник информации для отладки.

Подробнее об этом расскажет наш спикер на видео

Исследуем объект ошибки подробно

Чтобы полностью разобраться в объекте ошибки, используйте JSON.stringify(error):

.catch(error => console.log(JSON.stringify(error, null, 2)));

Используем TypeScript для большей точности в обработке ошибок Axios

TypeScript позволяет точно определить типы данных AxiosResponse и AxiosError, что предохраняет от исполнительных ошибок и помогает при написании кода.

Настраиваем определение ошибок

Для более точного определения критериев ошибки в Axios используйте функцию validateStatus в конфигурации:

axios.get('your/api/endpoint', {
  validateStatus: function (status) {
    return status < 500; // Прощаем ошибки с кодом, меньшим 500
  }
})

Интерпретация кодов состояния

Для обработки разных HTTP кодов статуса рекомендуется разделить их с помощью if-else или switch в блоке .catch.

Использование деструктуризации

Для быстрого доступа к определенной информации применяйте деструктуризацию status, data и headers:

.catch(error => {
  const { status, data, headers } = error.response;
  // ваш код
});

Визуализация

Получение кода состояния из ошибки Axios — словно открытие тайного сундука:

Запрос: 🏹
Ошибка: 🐉 (Ой!)

Скрипт для извлечения кода:

axios.get("/endpoint")
  .then(response => /* ... */)
  .catch(error => {
    if (error.response) { /* Вот где клад с кодом состояния */ }
  });

Иллюстрированная схема:

В норме: 🏹 -> 🎯 -> 👍 (200 – Цель достигнута!)
При ошибке: 🏹 -> 🐉 -> 🔍 -> 👑 (4xx/5xx – Код найден!)

Совет: Как у каждого дракона есть клад, так и в Axios каждая ошибка сопровождается кодом состояния.

Важность понимания ответов сервера на ошибки

Осмысление того, что говорит нам сервер при ошибке, важнее самого кода. Детально анализируйте error.response.data для эффективной отладки.

Значимость заголовков ответов

Заголовки могут содержать важные данные, например, ограничения на количество запросов. error.response.headers дает нам возможность углубиться в подробности.

Осторожное раскрытие деталей ошибки

Вместо борьбы со всем объектом error, разбирайте его по частям, используя деструктуризацию.

Синергия TypeScript и Axios

Совмещение TypeScript и Axios обеспечивает строгую типизацию response.data для большего удобства и безопасности.

Ищем закономерности

Опознавайте характерные черты ошибок и создавайте надежную систему их обработки, которая умеет различать операционные ошибки (вроде "404 – Not Found" или "503 – Service Unavailable") и ошибки разработчиков.

Полезные материалы

1. GitHub – axios/axios: Promise-основанный HTTP-клиент для браузера и node.js — Официальная документация по обработке ошибок в Axios.
2. Использование Fetch API – Веб API | MDN — Сравнение обработки ошибок Fetch API и Axios.
3. javascript – Как я могу получить код состояния из HTTP-ошибки в Axios? – Stack Overflow — Дискуссии и решения, связанные с обработкой ошибок в Axios на StackOverflow.
4. HTTP сообщения — Список кодов и сообщений состояний HTTP на одной странице для быстрого справления.
5. Обработка ошибок HTTP-запросов с помощью перехватчиков Axios – Mastering JS — Практическое руководство по обработке ошибок в Axios с использованием перехватчиков.
6. Не найдено название — Изучение обработки исключений в Axios на основе реальных кейсов.