Обработка ошибок и глобальные перехватчики
Обрабатывайте ошибки запросов и настраивайте перехватчики Axios
«Обработка ошибок и глобальные перехватчики» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Запросы могут завершаться ошибкой
Сетевое соединение может прерваться, серверы могут вернуть ошибки, а срок действия токенов может истечь. Надёжные приложения предусматривают сбои и корректно на них реагируют, вместо того чтобы аварийно завершаться или оставлять пользователя навсегда смотреть на индикатор загрузки.
try/catch вокруг запросов
Оборачивайте ожидаемые запросы в try/catch, чтобы перехватывать ошибки. Axios выбрасывает ошибку, когда сервер отвечает статусом 4xx или 5xx.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}Анализ ошибки
Ошибка Axios содержит полезные сведения. error.response существует, когда сервер ответил, а его отсутствие обычно означает сетевой сбой или превышение времени ожидания.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Отслеживание состояния ошибки
Храните сообщение об ошибке в реактивном состоянии, чтобы шаблон мог показать его пользователю.
data() {
return { posts: [], loading: false, error: null }
}Установка ошибки
Сбрасывайте ошибку перед каждым запросом, а затем заполняйте её в блоке catch.
async fetchPosts() {
this.loading = true
this.error = null
try {
this.posts = (await api.get("/posts")).data
} catch (err) {
this.error = "Could not load posts. Please try again."
} finally {
this.loading = false
}
}Отображение сообщений об ошибках
Показывайте ошибку в шаблоне, чтобы пользователи понимали, что произошло и что делать дальше.
<template>
<p v-if="loading">Loading...</p>
<p v-else-if="error" class="error">{{ error }}</p>
<ul v-else>
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
</template>Что такое перехватчики
Перехватчики Axios позволяют автоматически выполнять код для каждого запроса или ответа. Они отлично подходят для сквозных задач, например добавления токенов или централизованной обработки ошибок.
Перехватчики запросов
Перехватчик запроса выполняется перед отправкой каждого запроса. Используйте его, чтобы глобально добавлять заголовок авторизации.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Перехватчики ответов
Перехватчик ответа выполняется после получения каждого ответа. Он принимает две функции обратного вызова: одну для успешного результата и одну для ошибок.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Глобальная обработка ошибок
Централизация логики обработки ошибок в перехватчике ответов позволяет сохранить отдельные компоненты чистыми. Распространённые случаи, например 401 (выход из системы) или 500 (показ всплывающего уведомления), обрабатываются в одном месте.
api.interceptors.response.use(
res => res,
error => {
const status = error.response ? error.response.status : null
if (status === 401) logout()
if (status >= 500) showToast("Server error, try later")
return Promise.reject(error)
}
)Простая логика повторных попыток
При нестабильной сети можно повторить неудачный запрос ограниченное число раз, прежде чем прекратить попытки.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Быстрая проверка
Проверьте свои знания об обработке ошибок и перехватчиках.
Повторение
Оборачивайте запросы в try/catch, показывайте понятное сообщение error в пользовательском интерфейсе и анализируйте error.response, чтобы отличать ошибки сервера от сетевых сбоев. Перехватчики централизуют сквозные задачи: перехватчики запросов добавляют токены, перехватчики ответов обрабатывают глобальные ошибки, а небольшая вспомогательная функция повторных попыток повышает устойчивость. Далее Вы оптимизируете производительность приложения.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Обработка ошибок и глобальные перехватчики» бесплатный?
Да — полный текст урока «Обработка ошибок и глобальные перехватчики» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Обработка ошибок и глобальные перехватчики»?
Обрабатывайте ошибки запросов и настраивайте перехватчики Axios Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Обработка ошибок и глобальные перехватчики»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- HTTP-запросы с Axios
- Хуки жизненного цикла и получение данных
- Обработка ошибок и глобальные перехватчики