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

В современных веб-приложениях корректная обработка ошибок HTTP является критически важной для обеспечения стабильности и информативности интерфейса. Vue.js предоставляет гибкие инструменты для интеграции с API и централизованного управления ошибками при работе с асинхронными запросами.

Работа с HTTP-запросами

Для отправки HTTP-запросов чаще всего используют библиотеки Axios или встроенный fetch API. Основная цель — обработка успешных ответов и корректное реагирование на ошибки.

Пример запроса с Axios:

import axios from 'axios';

axios.get('/api/users')
  .then(response => {
    console.log('Данные получены:', response.data);
  })
  .catch(error => {
    handleHttpError(error);
  });

Пример с fetch:

fetch('/api/users')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Ошибка HTTP: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Данные получены:', data);
  })
  .catch(error => {
    handleHttpError(error);
  });

Централизованная обработка ошибок

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

function handleHttpError(error) {
  if (axios.isAxiosError(error)) {
    switch (error.response?.status) {
      case 400:
        console.error('Неверный запрос');
        break;
      case 401:
        console.error('Не авторизован');
        break;
      case 403:
        console.error('Доступ запрещён');
        break;
      case 404:
        console.error('Ресурс не найден');
        break;
      case 500:
        console.error('Внутренняя ошибка сервера');
        break;
      default:
        console.error('Неизвестная ошибка', error.message);
    }
  } else {
    console.error('Ошибка сети или клиента', error.message);
  }
}

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

Синтаксис async/await упрощает чтение кода и обработку ошибок с помощью блока try/catch.

async function fetchUsers() {
  try {
    const response = await axios.get('/api/users');
    console.log('Данные получены:', response.data);
  } catch (error) {
    handleHttpError(error);
  }
}

Интерсепторы Axios

Интерсепторы позволяют глобально перехватывать запросы и ответы, что упрощает обработку ошибок на уровне всего приложения.

axios.interceptors.response.use(
  response => response,
  error => {
    handleHttpError(error);
    return Promise.reject(error);
  }
);

Интерсепторы запросов полезны для автоматической подстановки токенов авторизации:

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Компонентная обработка ошибок во Vue

Во Vue.js можно использовать реактивные свойства для отображения состояния ошибки:

<template>
  <div>
    <p v-if="errorMessage">{{ errorMessage }}</p>
    <ul v-else>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const users = ref([]);
    const errorMessage = ref('');

    onMounted(async () => {
      try {
        const response = await axios.get('/api/users');
        users.value = response.data;
      } catch (error) {
        errorMessage.value = 'Не удалось загрузить данные';
        console.error(error);
      }
    });

    return { users, errorMessage };
  }
};
</script>

Обработка специфических сценариев

  1. Повторные попытки запроса (Retry) Для временных сбоев сети можно реализовать повторные запросы с экспоненциальной задержкой.

  2. Отмена запроса (AbortController) В некоторых случаях необходимо отменять запросы, например, при смене маршрута или при быстром наборе текста в поиске.

const controller = new AbortController();
fetch('/api/users', { signal: controller.signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Запрос отменён');
    } else {
      console.error(error);
    }
  });
// Отмена запроса
controller.abort();
  1. Интеграция с уведомлениями Использование глобальных уведомлений позволяет информировать пользователя об ошибках без дублирования кода в каждом компоненте.
function notifyError(message) {
  // Пример: использование сторонней библиотеки уведомлений
  console.log('Ошибка:', message);
}

Лучшие практики

  • Всегда проверять статус ответа (response.status) и корректность данных.
  • Разделять ошибки сети и ошибки сервера.
  • Использовать централизованную обработку для повторного использования.
  • При необходимости интегрировать с логированием и системой мониторинга.
  • Реализовывать пользовательские уведомления с понятным текстом и возможностью повторить действие.

Обработка ошибок HTTP в Vue.js должна быть гибкой, предсказуемой и интегрированной на уровне всего приложения для обеспечения стабильного пользовательского опыта.

Оглавление