Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-18 09:25:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add documentation on data fetching return types (#1934)

Browse Source
This commit is contained in:
Daniel Roe 2021-11-15 17:04:37 +00:00 committed by GitHub
parent 4a3ba73f22
commit c339966fad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/content/3.docs/1.usage/1.data-fetching.md
View File

@ -13,7 +13,12 @@ Within your pages, components and plugins you can use `useAsyncData` to get acce
### Usage
```js
useAsyncData(
const {
data: Ref<DataT>,
pending: Ref<boolean>,
refresh: (force?: boolean) => Promise<void>,
error?: any
} = useAsyncData(
key: string,
fn: () => Object,
options?: { lazy: boolean, server: boolean }
@ -29,6 +34,13 @@ useAsyncData(
* _transform_: A function that can be used to alter fn result after resolving
* _pick_: Only pick specified keys in this array from fn result
`useAsyncData` returns an object with the following properties:
* **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 force a refresh of the data
* **error**: an error object if the data fetching failed
Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
### Example
@ -64,7 +76,12 @@ This composable provides a convenient wrapper around `useAsyncData` and `$fetch`
### Usage
```ts
useFetch(url: string, options?)
const {
data: Ref<DataT>,
pending: Ref<boolean>,
refresh: (force?: boolean) => Promise<void>,
error?: any
} = useFetch(url: string, options?)
```
Available options:
@ -81,6 +98,8 @@ Available options:
* `pick`
* `transform`
The object returned by `useFetch` has the same properties as that returned by `useAsyncData` ([see above](#useasyncdata)).
### Example
```vue [app.vue]