Получение данных: useFetch и useAsyncData
useFetch(), useAsyncData(), получение данных на сервере и на клиенте, refresh() и состояние ожидания
«Получение данных: useFetch и useAsyncData» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Загрузка данных в Nuxt
Nuxt предоставляет композаблы для загрузки данных с учётом SSR. Они выполняются на сервере во время отображения страницы и передают результаты клиенту, предотвращая повторный запрос и кратковременное отображение пустого содержимого.
Основы useFetch
useFetch оборачивает загрузку URL. Он возвращает реактивные значения data, pending и error, которые можно напрямую использовать в шаблоне.
<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>Отображение загрузки и ошибок
Используйте pending для состояния загрузки, а error — для ошибок. В data хранится разобранный JSON.
<template>
<p v-if="pending">Loading...</p>
<p v-else-if="error">Failed to load</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>
</template>useAsyncData для собственной логики
Если Вам нужно нечто большее, чем простой URL, например объединить вызовы или преобразовать результаты, используйте useAsyncData. Он принимает уникальный ключ и функцию загрузки данных.
const { data } = await useAsyncData('posts', () => {
return $fetch('/api/posts')
})Почему ключ важен
Ключ устраняет дублирование и кэширует запрос. Два компонента с одним ключом используют общий результат и один сетевой запрос, предотвращая повторные загрузки.
useFetch — синтаксический сахар
Под капотом useFetch(url) — это по сути useAsyncData с автоматически созданным ключом и функцией загрузки $fetch(url). Используйте useFetch для простых URL, а useAsyncData — для пользовательских функций загрузки.
Только на клиенте с server:false
Установите server: false, чтобы пропустить загрузку во время SSR и выполнять её только на клиенте — это полезно для данных, зависящих от пользователя, которые не должны задерживать серверную отрисовку.
const { data } = await useFetch('/api/me', {
server: false
})Ленивая неблокирующая загрузка
По умолчанию await блокирует переход, пока не будут получены данные. Параметр lazy (или useLazyFetch) позволяет сразу отрисовать страницу и заполнить данные после завершения загрузки.
const { data, pending } = useFetch('/api/posts', {
lazy: true
})Повторная загрузка с помощью refresh
Компонуемые функции возвращают функцию refresh, чтобы при необходимости повторно выполнить загрузку — например, после изменения данных или нажатия кнопки.
const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }Реактивные параметры запроса
Передайте query или реактивные параметры; при изменении отслеживаемой реактивной ссылки загрузка автоматически запускается снова. Привяжите watch, чтобы повторять загрузку при изменении зависимостей.
const page = ref(1)
const { data } = await useFetch('/api/posts', {
query: { page },
watch: [page]
})Преобразование ответа
Параметр transform изменяет структуру ответа до того, как он попадёт в data — это удобно, чтобы выбрать только нужные поля и уменьшить объём данных, отправляемых клиенту.
const { data } = await useFetch('/api/user', {
transform: (u) => ({ name: u.name, id: u.id })
})Быстрая проверка
Проверьте свои знания о загрузке данных в Nuxt.
Итоги
Вы изучили загрузку данных в Nuxt:
- useFetch возвращает реактивные данные, состояние ожидания и ошибку.
- useAsyncData принимает ключ и функцию загрузки для собственной логики.
- server:false выполняет загрузку только на клиенте, а lazy делает её неблокирующей.
- refresh() запускает повторную загрузку, а watch повторяет её при изменении зависимости.
Часто задаваемые вопросы
Урок «Получение данных: useFetch и useAsyncData» бесплатный?
Да — полный текст урока «Получение данных: useFetch и useAsyncData» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Получение данных: useFetch и useAsyncData»?
useFetch(), useAsyncData(), получение данных на сервере и на клиенте, refresh() и состояние ожидания Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Получение данных: useFetch и useAsyncData»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Структура проекта Nuxt 3 и маршрутизация на основе файлов
- Получение данных: useFetch и useAsyncData
- Серверные маршруты и конечные точки API Nuxt
- Режимы SSR, SSG и SPA