Централизованная обработка ошибок Axios в JavaScript
Быстрый ответ
Встретились с ошибками при использовании Axios? Применяйте простое правило: используйте .catch()
для перехвата объекта ошибки и проанализируйте его содержимое. Это может быть error.response
, если сервер вернул ответ, error.request
, если от сервера нет ответа, или error.message
, если ошибка возникла при настройке запроса. Ниже представлен пример кода, демонстрирующего применение данного подхода:
axios.get('/endpoint')
.then(response => console.log(response.data)) // Всё прошло успешно!
.catch(error => {
let errMsg = error.response ? `Статус: ${error.response.status}, Данные: ${error.response.data}` // Ответ сервера содержит ошибку
: error.request ? 'Нет ответа' // Ответ от сервера не получен
: `Ошибка настройки запроса: ${error.message}`; // Неправильная настройка запроса
console.error(`Axios столкнулся с препятствием: ${errMsg}`); // Подробности ошибки
});
С применением этого подхода вы сможете адекватно реагировать на различные типы ошибок, возникающие при работе с Axios.
Игра с перехватчиками: Централизованное управление ошибками
Перехватчики Axios — это отличная возможность для централизации обработки ошибок. Вам не нужно применять .catch()
в разных местах кода, когда можно передать эту задачу перехватчику:
axios.interceptors.response.use(response => response, error => {
if (!error.response) {
console.error('Сервер не отвечает', error.request); // Нет ответа от сервера
} else if (!error.response.data) {
console.error('Нет данных в ответе', error.response); // Ответ не содержит данных
} else {
console.error('Сервер вернул ошибку:', error.response); // Ошибка пришла от сервера
}
return Promise.reject(error); // Передаем ошибку обратно
});
Подобный подход обеспечивает более гибкую работу с ошибками и делает код опрятнее.
Async/await: Облегчение обработки ошибок
Используете ли вы async/await в асинхронном коде? В этом случае освойте блок try/catch
, который поможет вам элегантно обрабатывать ошибки, которые возвращает Axios:
async function fetchTourDetails() {
try {
const response = await axios.get('/endpoint');
console.log(response.data); // Данные успешно получены, всё отлично!
} catch (error) {
console.error('Ошибка получения данных', error); // Возникли проблемы
}
}
Применение этого шаблона сделает ваш код более читабельным и удобным для поддержки.
Приемлемые коды ответа: Персонализация обработки ошибок
Как и в ресторане, где каждый клиент выбирает блюдо на свой вкус, в Axios вы можете использовать validateStatus
для того, чтобы определить, какие HTTP-статусы считать успешными:
axios.get('/endpoint', {
validateStatus: function(status) {
return status < 500; // Распознаем любой ответ со статусом, меньшим 500, как успешный
}
})
.then(response => console.log(response.data)) // Данные получены, всё хорошо
.catch(error => console.error(`Получен негативный ответ от сервера`, error)); // Проблемы соединения с сервером
Благодаря этому только определённые статусы будут обрабатываться как ошибки.
Следование принципу DRY с помощью Request.js
Если вы не хотите каждый раз реализовывать обработку ошибок, можно создать модуль Request.js, где этот функционал будет применяться один раз:
// Request.js
import axios from 'axios';
const request = axios.create({
baseURL: 'https://api.yourdomain.com',
/* ... дополнительные настройки ... */
});
request.interceptors.response.use(response => response, error => {
// Здесь вы вводите свою логику обработки ошибок
// ... обработка ошибок ...
return Promise.reject(error); // Чтобы сохранить выброс исключения
});
export default request; // Теперь можно использовать готовый модуль в приложении
Теперь вам достаточно просто импортировать этот модуль там, где это необходимо.
Правильная обработка ошибок в цепочках промисов
Если вы работаете с цепочками промисов, обеспечьте обработку ошибок на каждом этапе, используя .then().catch()
:
axios.get('/step1')
.then(response => {
console.log('Шаг 1 пройден', response.data); // Первый шаг успешно выполнен
return axios.get('/step2');
})
.then(response => {
console.log('Шаг 2 пройден', response.data); // Второй шаг успешно выполнен
})
.catch(error => {
console.error('Проблемы с выполнением шагов', error); // Где-то появилась ошибка!
});
Ошибка на любом этапе приведёт к её обработке в единственном блоке .catch()
в конце цепочки.
Визуализация
Представьте, что запрос в Axios – это поездка:
Запрос Axios 🚦: Здесь axios – это наше средство передвижения.
axios.get('/route')
Успешный ответ 🛣️: Всё идет гладко.
.then(response => /** Мы продолжаем движение **/)
Обработка ошибок 🚧: Появились препятствия на пути!
.catch(error => /** Попали в яму, но справимся **/)
Как опытный автомобилист, вы должны быть готовы к любым непредвиденным обстоятельствам на дороге.
Объект ошибки: Понимание и отладка
Объект ошибки – это не причина для беспокойства. Давайте же разбираться:
.catch(({ response, request, message }) => {
if (response) {
console.error(`Сервер ответил ошибкой со статусом ${response.status}:`, response.data); // Сервер вернул отрицательный ответ
} else if (request) {
console.error('Ошибка: нет ответа', request); // Ответ от сервера отсутствует
} else {
console.error("Проблема с настройкой запроса", message); // Ошибка при настройке запроса
}
});
Теперь вы оборудованы знаниями для отладки ошибок, как настоящий профессионал!
Отладка с помощью логирования
Логирование ошибок помогает разобраться, где произошла проблема. Не забывайте использовать журнал:
.catch(error => {
console.error(`Нежданный поворот: ошибка!`, error); // Невозможно предсказать ошибка
// Рассмотрите возможность использования системы логирования для более точного трекинга
logService.error(error);
});
Логи помогают прогнозировать и предотвращать потенциальные проблемы.
Использование метода .get для простых запросов
Используйте axios.get
для GET-запросов – это наиболее простой и удобный метод:
axios.get('/simple-get')
.then(response => console.log('Данные:', response.data)) // Данные получены!
.catch(error => console.error('Проблемы с сервером!', error)); // Сервер не смог обработать запрос.
Просто и эффективно.
Полезные материалы
- GitHub – axios/axios: Promise based HTTP client for the browser and node.js — основной источник для изучения обработки ошибок в Axios.
- Использование промисов – JavaScript | MDN — полное руководство по работе с промисами в JavaScript, включая обработку ошибок.
- Async/await — всё, что нужно знать о async/await в JavaScript.
- javascript – Как мне получить код статуса из HTTP-ошибки в Axios? – Stack Overflow — сообщества обсуждают HTTP-ошибки в Axios.
- Перехватчики | Axios Docs — Если вам интересны перехватчики Axios, не пропустите!