useLazyFetch

Исходный код
Обёртка над useFetch: навигация не ждёт завершения запроса.

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

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

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

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>
    <div v-for="post in posts">
      <!-- обработка post -->
    </div>
  </div>
</template>
Сигнатура useLazyFetch совпадает с useFetch.
await useLazyFetch лишь инициализирует вызов. При клиентской навигации данные могут быть недоступны сразу — обрабатывайте pending в шаблоне.
useLazyFetch — зарезервированное имя компилятора; свою функцию так называть нельзя.

Тип

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

Параметры

Как у useFetch:

  • URL (string | Request | Ref<string | Request> | () => string | Request): адрес или Request.
  • options (object): как в useFetch, с автоматическим lazy: true.
Узнать больше Docs > 3 X > API > Composables > Use Fetch#parameters.

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

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

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

Примеры

Состояние загрузки

pages/index.vue
<script setup lang="ts">
/* Навигация до завершения загрузки.
 * Обрабатывайте 'pending' и 'error' в шаблоне.
 */
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>
    <div v-for="post in posts">
      <!-- обработка post -->
    </div>
  </div>
</template>
Узнать больше Docs > 3 X > Getting Started > Data Fetching.