useLazyFetch

Source
Обёртка над useFetch: навигация выполняется сразу, без ожидания загрузки.

useLazyFetch — обёртка над useFetch с опцией lazy: true: навигация выполняется до завершения загрузки.

Использование

По умолчанию useFetch блокирует переход до завершения загрузки. useLazyFetch не блокирует: переход происходит сразу, данные подгружаются в фоне.

app/pages/index.vue
<script setup lang="ts">
const { status, data: posts } = await useLazyFetch('/api/posts')
</script>

<template>
  <div v-if="status === 'pending'">
    Загрузка ...
  </div>
  <div v-else-if="status === 'error'">
    Error loading posts
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- ... -->
    </div>
  </div>
</template>
Сигнатура useLazyFetch совпадает с useFetch.
await useLazyFetch только инициирует запрос. При клиентской навигации проверяйте в шаблоне status === 'pending' и status === 'error' до использования результата.
useLazyFetch — зарезервированное имя, обрабатываемое компилятором; не называйте так свои функции.

Тип

Signature
export function useLazyFetch<ResT, ErrorT = NuxtError<unknown>, DataT = ResT> (
  url: string | Request | Ref<string | Request> | (() => string | Request),
  options?: UseFetchOptions<ResT, DataT>,
): AsyncData<DataT, ErrorT> & Promise<AsyncData<DataT, ErrorT>>
useLazyFetch эквивалентен useFetch с опцией lazy: true. Полные типы — в useFetch.

Параметры

Те же, что у useFetch:

  • URL: URL или объект запроса.
  • options: опции как у useFetch, при этом lazy автоматически true.
Узнать больше Docs > 4 X > API > Composables > Use Fetch#parameters.

Возвращаемые значения

Тот же объект AsyncData, что и у useFetch:

ИмяТипОписание
dataRef<DataT | undefined>Результат запроса.
refresh(opts?: AsyncDataExecuteOptions) => Promise<void>Ручное обновление данных.
executeто жеАлиас для refresh.
errorRef<ErrorT | undefined>Ошибка при сбое загрузки.
statusRef<'idle' | 'pending' | 'success' | 'error'>Статус запроса.
pendingRef<boolean>true, пока запрос выполняется. См. useFetch.
clear() => voidСброс данных, ошибки, статуса и отмена запросов.
Узнать больше Docs > 4 X > API > Composables > Use Fetch#return Values.

Примеры

Обработка состояния загрузки

app/pages/index.vue
<script setup lang="ts">
/* useLazyFetch lets navigation continue before the fetch completes.
 * Handle loading and error states in the template.
 */
const { status, data: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
  // posts изначально может быть null — можно следить через watch
})
</script>

<template>
  <div v-if="status === 'pending'">
    Загрузка ...
  </div>
  <div v-else-if="status === 'error'">
    Error loading posts
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- ... -->
    </div>
  </div>
</template>
Узнать больше Docs > 4 X > Getting Started > Data Fetching.