Frontend Academy · Урок

useFetch и useAsyncData

Получайте данные сервера с помощью useFetch и useAsyncData, обрабатывайте состояния ожидания и ошибки и разбирайтесь, как Nuxt гидратирует клиент

«useFetch и useAsyncData» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Получение данных в Nuxt 3

Nuxt предоставляет два основных композабла для получения данных: useFetch (на основе URL, внутри вызывает fetch) и useAsyncData (принимает любую асинхронную функцию и использует уникальный ключ для кэширования и устранения дубликатов).

useFetch — быстрый способ

Передайте URL — Nuxt получит данные во время SSR, восстановит состояние на клиенте и не позволит клиенту повторно получать данные при гидратации.

<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts');
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

Почему при гидратации нет двойного запроса

Nuxt сериализует полученные данные в полезную нагрузку SSR HTML. На клиенте useFetch восстанавливает данные из этой полезной нагрузки — второй сетевой запрос не выполняется. Это ключевая оптимизация SSR.

useAsyncData — гибкий асинхронный подход

Используйте этот композабл, когда получение данных не сводится к простому URL: для запросов к базе данных, собственной логики и многоэтапных запросов.

<script setup>
const { data: user } = await useAsyncData('user-profile', async () => {
  const me = await $fetch('/api/me');
  const stats = await $fetch(`/api/users/${me.id}/stats`);
  return { ...me, stats };
});
</script>

Важность ключа кэша

Первый аргумент useAsyncData — уникальный ключ кэша. Один и тот же ключ в разных компонентах устраняет дубликаты и позволяет повторно использовать результат. Разные ключи означают независимые запросы.

// Two components calling useFetch('/api/posts') share one request
// Two components calling useFetch('/api/posts', { key: 'a' }) and { key: 'b' } fetch twice

Обновление и отложенная загрузка

Оба композабла возвращают refresh() для повторного получения данных и принимают { lazy: true }, чтобы не блокировать SSR: данные загружаются после формирования страницы.

const { data, refresh } = await useFetch('/api/posts');

async function onSave() {
  await $fetch('/api/posts', { method: 'POST', body: newPost });
  await refresh();
}

// Or lazy mode:
const { data, pending } = useFetch('/api/posts', { lazy: true });

Наблюдение и реактивные URL

Передайте функцию для URL — он станет реактивным. Данные будут запрашиваться повторно при изменении зависимостей.

<script setup>
const page = ref(1);
const { data } = await useFetch(() => `/api/posts?page=${page.value}`);
// Changing page.value re-runs the fetch
</script>

Параметры запроса

useFetch принимает те же параметры, что и fetch: method, body, headers, а также специфичные для Nuxt параметры, такие как default и transform.

const { data } = await useFetch('/api/posts', {
  method: 'POST',
  body: { title: 'Hello' },
  headers: { 'X-Custom': '1' },
  transform: (raw) => raw.items.map(transformItem),
  default: () => []
});

$fetch — императивное получение данных

$fetch — универсальный механизм получения данных в Nuxt, работающий поверх ofetch. Он не отслеживает гидратацию автоматически. Используйте его в обработчиках событий и операциях изменения данных.

async function deletePost(id) {
  await $fetch(`/api/posts/${id}`, { method: 'DELETE' });
  await refresh();
}

Обработка ошибок

Выбросьте ошибку внутри обработчика получения данных, чтобы передать её наружу. Страницы могут показывать собственную страницу ошибки с помощью ~/error.vue.

// error.vue at project root
<script setup>
const props = defineProps<{ error: any }>();
</script>

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="clearError({ redirect: '/' })">Home</button>
  </div>
</template>

Аутентификация и cookies

useFetch автоматически пересылает cookies во время SSR, поэтому аутентифицированные запросы работают и на сервере, и на клиенте без ручной обработки cookie.

useFetch и useAsyncData — когда что использовать

useFetch: простые запросы на основе URL (95% случаев). useAsyncData: собственная асинхронная логика, многоэтапное составление запросов и источники, не связанные с URL (база данных через server/utils).

Быстрая проверка

Почему useFetch в Nuxt 3 предотвращает дублирование сетевого запроса при гидратации страницы на клиенте?

Итоги: useFetch и useAsyncData

useFetch: вариант для URL, подходящий в 95% случаев. useAsyncData: пользовательская асинхронная логика с уникальным ключом кэша. Оба варианта гидратируются из полезной нагрузки SSR (без повторного запроса). refresh() повторно отправляет запрос, lazy:true позволяет не блокировать SSR. Реактивные URL запускают повторный запрос. $fetch используется для императивных мутаций. error.vue обрабатывает ошибки. При SSR файлы cookie пересылаются автоматически.

Часто задаваемые вопросы

Урок «useFetch и useAsyncData» бесплатный?

Да — полный текст урока «useFetch и useAsyncData» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «useFetch и useAsyncData»?

Получайте данные сервера с помощью useFetch и useAsyncData, обрабатывайте состояния ожидания и ошибки и разбирайтесь, как Nuxt гидратирует клиент Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «useFetch и useAsyncData»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy