Получить профессию в Skypro
Централизованная обработка ошибок 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, не пропустите!