diff --git a/docs/content/3.docs/1.usage/1.data-fetching.md b/docs/content/3.docs/1.usage/1.data-fetching.md index 7a6eedb609..70279e698e 100644 --- a/docs/content/3.docs/1.usage/1.data-fetching.md +++ b/docs/content/3.docs/1.usage/1.data-fetching.md @@ -13,7 +13,12 @@ Within your pages, components and plugins you can use `useAsyncData` to get acce ### Usage ```js -useAsyncData( +const { + data: Ref, + pending: Ref, + refresh: (force?: boolean) => Promise, + 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 `` 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, + pending: Ref, + refresh: (force?: boolean) => Promise, + 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]