Este composable proporciona un envoltorio conveniente alrededor de useAsyncData y $fetch. Genera automáticamente una clave basada en la URL y las opciones de fetch, proporciona sugerencias de tipo para la URL de solicitud basadas en rutas del servidor e infiere el tipo de respuesta de la API.

Uso

const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
  pick: ['title']
})

Usando la opción query, puedes agregar parámetros de búsqueda a tu consulta. Esta opción se extiende de unjs/ofetch y utiliza unjs/ufo para crear la URL. Los objetos se convierten automáticamente en cadenas.

const param1 = ref('value1')
const { data, status, error, refresh } = await useFetch('/api/modules', {
  query: { param1, param2: 'value2' }
})

El ejemplo anterior resulta en https://api.nuxt.com/modules?param1=value1&param2=value2.

También puedes usar interceptores:

const { data, status, error, refresh, clear } = await useFetch('/api/auth/login', {
  onRequest({ request, options }) {
    // Establecer los encabezados de la solicitud
    // nota que esto depende de ofetch >= 1.4.0 - puede que necesites actualizar tu archivo de bloqueo
    options.headers.set('Authorization', '...')
  },
  onRequestError({ request, options, error }) {
    // Manejar los errores de la solicitud
  },
  onResponse({ request, response, options }) {
    // Procesar los datos de la respuesta
    localStorage.setItem('token', response._data.token)
  },
  onResponseError({ request, response, options }) {
    // Manejar los errores de la respuesta
  }
})

Claves Reactivas y Estado Compartido

Puedes usar una referencia computada o una referencia simple como la URL, permitiendo la obtención de datos dinámica que se actualiza automáticamente cuando la URL cambia:

const route = useRoute()
const id = computed(() => route.params.id)

// Cuando la ruta cambia y el id se actualiza, los datos se volverán a obtener automáticamente
const { data: post } = await useFetch(() => `/api/posts/${id.value}`)

Cuando usas useFetch con la misma URL y opciones en múltiples componentes, compartirán las mismas referencias data, error y status. Esto asegura consistencia entre componentes.

Tipo

function useFetch<DataT, ErrorT>(
  url: string | Request | Ref<string | Request> | (() => string | Request),
  options?: UseFetchOptions<DataT>
): Promise<AsyncData<DataT, ErrorT>>

type UseFetchOptions<DataT> = {
  key?: string
  method?: string
  query?: SearchParams
  params?: SearchParams
  body?: RequestInit['body'] | Record<string, any>
  headers?: Record<string, string> | [key: string, value: string][] | Headers
  baseURL?: string
  server?: boolean
  lazy?: boolean
  immediate?: boolean
  getCachedData?: (key: string, nuxtApp: NuxtApp, ctx: AsyncDataRequestContext) => DataT | undefined
  deep?: boolean
  dedupe?: 'cancel' | 'defer'
  default?: () => DataT
  transform?: (input: DataT) => DataT | Promise<DataT>
  pick?: string[]
  watch?: WatchSource[] | false
}

type AsyncDataRequestContext = {
  /** La razón para esta solicitud de datos */
  cause: 'initial' | 'refresh:manual' | 'refresh:hook' | 'watch'
}

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'

Parámetros

• URL (string | Request | Ref<string | Request> | () => string | Request): La URL o solicitud a obtener. Puede ser una cadena, un objeto Request, una referencia de Vue o una función que devuelve una cadena/Request. Soporta reactividad para endpoints dinámicos.

• options (objeto): Configuración para la solicitud de fetch. Extiende las opciones de unjs/ofetch y AsyncDataOptions. Todas las opciones pueden ser un valor estático, una ref o un valor computado.

getCachedData predeterminado:

const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating 
 ? nuxtApp.payload.data[key] 
 : nuxtApp.static.data[key]

Esto solo almacena en caché los datos cuando experimental.payloadExtraction en nuxt.config está habilitado.

Valores de Retorno

Valores de Estado

• idle: La solicitud no ha comenzado (por ejemplo, { immediate: false } o { server: false } en renderizado del servidor)
• pending: La solicitud está en progreso
• success: La solicitud se completó con éxito
• error: La solicitud falló

Ejemplos