Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-26 07:32:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(api): apply use-async-data page structure to use-fetch (#4332)

Browse Source
This commit is contained in:
Clément Ollivier 2022-04-13 19:14:03 +02:00 committed by GitHub
parent 41b5cfc0ae
commit a89d2f9c1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
docs/content/3.api/1.composables/use-fetch.md
View File

@ -1,33 +1,70 @@
# `useFetch` # `useFetch`
```ts This composable provides a convenient wrapper around [`useAsyncData`](/api/composables/use-async-data) and [`$fetch`](/api/utils/$fetch). It automatically generates a key based on URL and fetch options, as well as infers API response type.
const {
data: Ref<DataT>, ## Type
pending: Ref<boolean>,
refresh: (force?: boolean) => Promise<void>, ```ts [Signature]
error?: any function useFetch(
} = useFetch(url: string, options?) 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>
}
``` ```
Available options: ## Params
* `key`: Provide a custom key * **Url**: The URL to fetch
* Options from [ohmyfetch](https://github.com/unjs/ohmyfetch) * **Options (from [ohmyfetch](https://github.com/unjs/ohmyfetch))**:
* `method`: Request method * `method`: Request method
* `params`: Query params * `params`: Query params
* `headers`: Request headers * `headers`: Request headers
* `baseURL`: Base URL for the request * `baseURL`: Base URL for the request
* Options from `useAsyncData` * **Options (from `useAsyncData`)**:
* `lazy` * `lazy`: Whether to resolve the async function after loading the route, instead of blocking navigation (defaults to `false`).
* `server` * `server`: Whether to fetch the data on server-side (defaults to `true`).
* `default` * `default`: A factory function to set the default value of the data, before the async function resolves - particularly useful with the `lazy: true` option.
* `pick` * `pick`: Only pick specified keys in this array from `handler` function result.
* `transform` * `transform`: A function that can be used to alter `handler` function result after resolving.
The object returned by `useFetch` has the same properties as that returned by `useAsyncData` ([see above](#useasyncdata)). ## Return values
::ReadMore{link="/guide/features/data-fetching"} * **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
::ReadMore{link="/api/composables/use-async-data"} By default, Nuxt waits until a `refresh` is finished before it can be executed again. Passing `true` as parameter skips that wait.
::
## Example
```ts
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"}