useLazyAsyncData
En esta página
useLazyAsyncData provides a wrapper around useAsyncData that triggers navigation before the handler is resolved by setting the lazy option to true.
::note
By default, useAsyncData blocks navigation until its async handler is resolved. useLazyAsyncData allows navigation to occur immediately while data fetching continues in the background.
::
Usage#
```vue [app/pages/index.vue]
`useLazyAsyncData` lets navigation continue while it fetches data. Check `status === 'pending'` and `status === 'error'` in your component's template before using the result.
::warning
`useLazyAsyncData` is a reserved function name transformed by the compiler, so you should not name your own function `useLazyAsyncData`.
::
## Type
```ts [Signature]
export function useLazyAsyncData<ResT, DataE = unknown, DataT = ResT> (
handler: AsyncDataHandler<ResT>,
options?: AsyncDataOptions<ResT, DataT>,
): AsyncData<DataT, DataE> & Promise<AsyncData<DataT, DataE>>
export function useLazyAsyncData<ResT, DataE = unknown, DataT = ResT> (
key: MaybeRefOrGetter<string>,
handler: AsyncDataHandler<ResT>,
options?: AsyncDataOptions<ResT, DataT>,
): AsyncData<DataT, DataE> & Promise<AsyncData<DataT, DataE>>
useLazyAsyncData has the same signature as useAsyncData.
Parameters#
useLazyAsyncData accepts the same parameters as useAsyncData, with the lazy option automatically set to true.
:read-more{to="/docs/4.x/api/composables/use-async-data#parameters"}
Return Values#
useLazyAsyncData returns the same values as useAsyncData.
:read-more{to="/docs/4.x/api/composables/use-async-data#return-values"}
Example#
```vue [app/pages/index.vue]
```
:read-more{to="/docs/4.x/getting-started/data-fetching"}