mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 16:43:55 +00:00
2.2 KiB
2.2 KiB
useFetch
This composable provides a convenient wrapper around useAsyncData
and $fetch
. It automatically generates a key based on URL and fetch options, as well as infers API response type.
Type
function useFetch(
url: string,
options?: UseFetchOptions
): Promise<DataT>
type UseFetchOptions = {
method?: string,
params?: SearchParams,
headers?: {key: string, value: string}[],
baseURL?: string,
server?: boolean
lazy?: boolean
default?: () => DataT
transform?: (input: DataT) => DataT
pick?: string[]
}
type DataT = {
data: Ref<DataT>
pending: Ref<boolean>
refresh: () => Promise<void>
error: Ref<any>
}
Params
- Url: The URL to fetch
- Options (from ohmyfetch):
method
: Request methodparams
: Query paramsheaders
: Request headersbaseURL
: Base URL for the request
- Options (from
useAsyncData
):lazy
: Whether to resolve the async function after loading the route, instead of blocking navigation (defaults tofalse
).server
: Whether to fetch the data on the server (defaults totrue
).default
: A factory function to set the default value of the data, before the async function resolves - particularly useful with thelazy: true
option.pick
: Only pick specified keys in this array from thehandler
function result.transform
: A function that can be used to alterhandler
function result after resolving.
Return values
- data: the result of the asynchronous function that is passed in
- pending: a boolean indicating whether the data is still being fetched
- refresh: a function that can be used to refresh the data returned by the
handler
function - error: an error object if the data fetching failed
By default, Nuxt waits until a refresh
is finished before it can be executed again. Passing true
as parameter skips that wait.
Example
const { data, pending, error, refresh } = useFetch(
'https://api.nuxtjs.dev/mountains',
{
pick: ['title']
}
)
:ReadMore{link="/guide/features/data-fetching"}
:LinkExample{link="/examples/composables/use-fetch"}