Обработка асинхронных ошибок в композируемых модулях
try/catch в асинхронных композируемых модулях, предоставление состояния ошибки и логика повторных попыток в useFetch
«Обработка асинхронных ошибок в композируемых модулях» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Ошибки в асинхронных композаблах
Композаблам, которые получают данные или выполняют асинхронные операции, нужна собственная стратегия обработки ошибок. Шаблон таков: предоставьте реактивную ссылку error, чтобы вызывающий код мог отреагировать, а асинхронная функция перехватывала сбои внутри себя.
Предоставление реактивной ссылки error
Возвращайте реактивную ссылку error вместе с данными и состоянием загрузки. Вызывающий код отслеживает её, чтобы показывать сообщения.
function useApi() {
const data = ref(null);
const error = ref(null);
return { data, error };
}try / catch в асинхронных функциях
Внутри асинхронной функции оберните вызовы с ожиданием в try/catch и сохраните сбой в реактивной ссылке ошибки, вместо того чтобы позволять ему возникать без перехвата.
async function load() {
try {
data.value = await api.get();
} catch (e) {
error.value = e;
}
}Сброс состояния ошибки
Очищайте предыдущую ошибку в начале каждой попытки, чтобы устаревшие сообщения не оставались после успешной повторной попытки.
async function load() {
error.value = null;
try { /* ... */ } catch (e) { error.value = e; }
}Реактивная ссылка retryCount
Чтобы поддержать повторные попытки, отслеживайте число попыток с помощью реактивной ссылки retryCount. Увеличивайте её при каждом повторе, инициированном пользователем.
const retryCount = ref(0);
function retry() {
retryCount.value++;
load();
}Автоматическая логика повторных попыток
Можно автоматически повторять попытки до установленного предела, увеличивая интервал между ними. Остановитесь, когда число попыток превысит максимальное значение.
async function load() {
try {
data.value = await api.get();
} catch (e) {
if (retryCount.value < 3) {
retryCount.value++;
return load();
}
error.value = e;
}
}Возврат полного программного интерфейса
Предоставьте данные, ошибку, функцию повторной попытки и retryCount, чтобы у компонента было всё необходимое.
return { data, error, retry, retryCount };Использование ошибки
В компоненте выполняйте отрисовку на основе реактивной ссылки ошибки и добавьте кнопку повторной попытки, связанную с предоставленной функцией.
<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>Ошибки композабла и глобальный обработчик
Обработка ошибок на уровне композабла предназначена для ожидаемых сбоев, на которые интерфейс должен реагировать, например для неудачного запроса или ошибки проверки. Компонент решает, как их представить.
Когда вступает в действие глобальная граница
Глобальный обработчик и границы ошибок перехватывают неожиданные, необработанные ошибки — программные ошибки и сбои отрисовки. Они служат защитной сетью, а не основным обработчиком предсказуемых асинхронных сбоев.
Выбор подходящего уровня
Практическое правило: обрабатывайте ожидаемые асинхронные ошибки внутри композабла с помощью реактивной ссылки ошибки, а действительно неожиданные позволяйте передавать глобальному обработчику. Так обратная связь для интерфейса остаётся локальной, а защита от сбоев — глобальной.
Быстрая проверка
Где следует обрабатывать ожидаемые асинхронные сбои, например неудачное получение данных?
Итоги
Вы узнали, что асинхронные композаблы предоставляют реактивную ссылку error, используют try/catch в асинхронных функциях, поддерживают повторные попытки с помощью реактивной ссылки retryCount и функции повторной попытки, а ошибки на уровне композабла обрабатывают ожидаемые сбои, тогда как глобальный обработчик охватывает неожиданные.
Часто задаваемые вопросы
Урок «Обработка асинхронных ошибок в композируемых модулях» бесплатный?
Да — полный текст урока «Обработка асинхронных ошибок в композируемых модулях» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Обработка асинхронных ошибок в композируемых модулях»?
try/catch в асинхронных композируемых модулях, предоставление состояния ошибки и логика повторных попыток в useFetch Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Обработка асинхронных ошибок в композируемых модулях»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Хук жизненного цикла onErrorCaptured
- Компоненты границы ошибок
- app.config.errorHandler для глобальных ошибок
- Обработка асинхронных ошибок в композируемых модулях