useAsyncData

Вы можете использовать useAsyncData на страницах, в компонентах и плагинах, чтобы получить доступ к данным, которые разрешаются асинхронно.

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

<script setup lang="ts">
const { data, status, error, refresh, clear } = await useAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains')
)
</script>

Наблюдение за параметрами

Встроенный параметр watch позволяет автоматически повторно выполнять функцию-загрузчик при обнаружении любых изменений.

<script setup lang="ts">
const page = ref(1)
const { data: posts } = await useAsyncData(
  'posts',
  () => $fetch('https://fakeApi.com/posts', {
    params: {
      page: page.value
    }
  }), {
    watch: [page]
  }
)
</script>

Параметры

• key: уникальный ключ, который гарантирует, что получение данных может быть правильно дедуплицировано между запросами. Если вы не предоставляете ключ, то ключ, уникальный для имени файла и номера строки экземпляра useAsyncData, будет сгенерирован для вас.
• handler: асинхронная функция, которая должна возвращать истинное значение (например, она не должна быть undefined или null), иначе запрос может быть дублирован на клиенте.
• options:
  • server: параметр, определяющий, следует ли получать данные на сервере (по умолчанию true)
  • lazy: параметр, определяющий, следует ли разрешать асинхронную функцию после загрузки маршрута, вместо блокировки навигации на клиенте. (по умолчанию false)
  • immediate: если установить значение false, это предотвратит немедленное выполнение запроса. (по умолчанию true)
  • default: функция-фабрика для установки значения по умолчанию для data перед тем, как асинхронная функция будет разрешена. Это полезно при использовании параметров lazy: true или immediate: false.
  • transform: функция, которая может быть использована для изменения результата функции-обработчика после ее разрешения.
  • getCachedData: функция, которая возвращает кэшированные данные. Возвращаемое значение null или undefined будет вызывать выборку данных. По умолчанию это: key => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key], которая кэширует данные, только если включено payloadExtraction.
  • pick: выбрать из результата функции handler только указанные ключи в этом массиве
  • watch: следить за реактивными источниками для автоматического обновления
  • deep: возвращать данные в виде глубокого ref-объекта. Можно установить значение false, чтобы возвращать данные в виде объекта с неглубокой реактивностью, что может повысить производительность, если ваши данные не нуждаются в этом.
  • dedupe: избегайте получения одного и того же ключа более одного раза за раз (по умолчанию cancel). Возможные параметры:
    • cancel - отменяет существующие запросы при поступлении нового
    • defer - вообще не делает новых запросов, если есть отложенный запрос

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

• data: результат работы переданной асинхронной функции.
• refresh/execute: функция, которая может быть использована для обновления данных, возвращенных функцией handler.
• error: объект ошибки, если получение данных не удалось.
• status: строка, указывающая на статус запроса данных ("idle", "pending", "success", "error").
• clear: функция, которая установит data в undefined, error в null, pending в false, status в idle, и отметит любые текущие ожидающие запросы как отмененные.

По умолчанию Nuxt ждет, пока refresh не будет завершен, прежде чем его можно будет выполнить снова.

Тип

function useAsyncData<DataT, DataE>(
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): AsyncData<DataT, DataE>
function useAsyncData<DataT, DataE>(
  key: string,
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): Promise<AsyncData<DataT, DataE>>

type AsyncDataOptions<DataT> = {
  server?: boolean
  lazy?: boolean
  immediate?: boolean
  deep?: boolean
  dedupe?: 'cancel' | 'defer'
  default?: () => DataT | Ref<DataT> | null
  transform?: (input: DataT) => DataT | Promise<DataT>
  pick?: string[]
  watch?: WatchSource[]
  getCachedData?: (key: string, nuxtApp: NuxtApp) => DataT
}

type AsyncData<DataT, ErrorT> = {
  data: Ref<DataT | null>
  refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
  execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
  clear: () => void
  error: Ref<ErrorT | null>
  status: Ref<AsyncDataRequestStatus>
};

interface AsyncDataExecuteOptions {
  dedupe?: 'cancel' | 'defer'
}

type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'