useFetch: композируемый модуль для асинхронных данных
ссылки data, loading и error, загрузка при монтировании, функция повторной загрузки и очистка через AbortController
«useFetch: композируемый модуль для асинхронных данных» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Цель useFetch
Асинхронная загрузка данных постоянно повторяется: флаги загрузки, обработка ошибок и сам запрос. useFetch объединяет всё это в один повторно используемый композабл, возвращающий data, loading и error.
Три реактивных рефа
Начните с трёх рефов, описывающих состояние любого асинхронного запроса.
import { ref } from "vue";
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
}Процедура загрузки
Напишите асинхронную функцию, которая изменяет loading, выполняет запрос и сохраняет результат. Обработку ошибок мы уточним далее.
async function execute() {
loading.value = true;
const res = await fetch(url);
data.value = await res.json();
loading.value = false;
}try / catch / finally
Оберните запрос так, чтобы ошибки попадали в error, а loading всегда сбрасывался — и при успехе, и при сбое — в блоке finally.
async function execute() {
loading.value = true;
error.value = null;
try {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
data.value = await res.json();
} catch (e) {
error.value = e;
} finally {
loading.value = false;
}
}Загрузка в onMounted
Запустите запрос при монтировании компонента, чтобы данные загружались автоматически.
import { onMounted } from "vue";
onMounted(execute);Функция повторной загрузки
Предоставьте execute под именем refetch, чтобы пользователи могли перезапускать загрузку по требованию — после изменения данных или при нажатии кнопки повтора.
return { data, loading, error, refetch: execute };AbortController для очистки
Если компонент размонтируется во время запроса, прервите загрузку, чтобы не изменять состояние несуществующего компонента. Создайте AbortController и передайте его сигнал.
const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });Прерывание при размонтировании
Отмените выполняющийся запрос в onUnmounted. Игнорируйте возникшую ошибку прерывания в блоке обработки.
import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());Полный useFetch
В собранном виде композабл объединяет загрузку, обработку ошибок, повторную загрузку и очистку в один аккуратный модуль.
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
const controller = new AbortController();
async function execute() {
loading.value = true; error.value = null;
try {
const res = await fetch(url, { signal: controller.signal });
data.value = await res.json();
} catch (e) {
if (e.name !== "AbortError") error.value = e;
} finally {
loading.value = false;
}
}
onMounted(execute);
onUnmounted(() => controller.abort());
return { data, loading, error, refetch: execute };
}Использование в компоненте
Пользователи отображают данные на основе трёх рефов: индикатор загрузки во время загрузки, сообщение об ошибке при сбое и сами данные в остальных случаях.
const { data, loading, error } = useFetch("/api/posts");Шаблонный подход
В шаблоне используйте ветвление по состоянию, чтобы обеспечить полноценное взаимодействие с пользователем.
<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>Быстрая проверка
Какова роль AbortController в useFetch?
Итоги
Вы создали useFetch(url), предоставляющий рефы data, loading и error, выполняющий загрузку в onMounted по схеме try/catch/finally, функцию refetch и AbortController, очищаемый в onUnmounted.
Часто задаваемые вопросы
Урок «useFetch: композируемый модуль для асинхронных данных» бесплатный?
Да — полный текст урока «useFetch: композируемый модуль для асинхронных данных» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «useFetch: композируемый модуль для асинхронных данных»?
ссылки data, loading и error, загрузка при монтировании, функция повторной загрузки и очистка через AbortController Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «useFetch: композируемый модуль для асинхронных данных»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что делает компонуемую функцию хорошей
- useCounter: простой композируемый модуль
- useFetch: композируемый модуль для асинхронных данных
- VueUse: библиотека композируемых модулей