Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 23:22:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(data-fetching): add note about difference between useFetch and useAsyncData (#4974)

Browse Source
This commit is contained in:
Daniel Roe 2022-05-20 09:59:45 +01:00 committed by GitHub
parent 78d1a87d4c
commit 36ad29a67c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 60 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
docs/content/2.guide/2.features/5.data-fetching.md
View File

@ -6,60 +6,6 @@ Nuxt provides `useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData`
**`useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData` only work during `setup` or `Lifecycle Hooks`**
::
## `useAsyncData`
Within your pages, components and plugins you can use `useAsyncData` to get access to data that resolves asynchronously.
::ReadMore{link="/api/composables/use-async-data"}
::
### Example
```ts [server/api/count.ts]
let counter = 0
export default () => {
counter++
return JSON.stringify(counter)
}
```
```vue [app.vue]
<script setup>
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
</script>
<template>
Page visits: {{ data }}
</template>
```
:LinkExample{link="/examples/composables/use-async-data"}
## `useLazyAsyncData`
This composable behaves identically to `useAsyncData` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
::ReadMore{link="/api/composables/use-lazy-async-data"}
::
### Example
```vue
<template>
<div>
{{ pending ? 'Loading' : count }}
</div>
</template>
<script setup>
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
// Because count starts out null, you won't have access
// to its contents immediately, but you can watch it.
})
</script>
```
## `useFetch`
Within your pages, components and plugins you can use `useFetch` to universally fetch from any URL.
@ -114,6 +60,66 @@ watch(posts, (newPosts) => {
</script>
```
## `useAsyncData`
Within your pages, components and plugins you can use `useAsyncData` to get access to data that resolves asynchronously.
::alert
You might be asking yourself: what is the difference between `useFetch` and `useAsyncData`?
In brief, `useFetch` receives a URL and gets that data, whereas `useAsyncData` might have more complex logic. `useFetch(url)` is nearly equivalent to `useAsyncData(url, () => $fetch(url))` - it's developer experience sugar for the most common use case.
::
::ReadMore{link="/api/composables/use-async-data"}
::
### Example
```ts [server/api/count.ts]
let counter = 0
export default () => {
counter++
return JSON.stringify(counter)
}
```
```vue [app.vue]
<script setup>
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
</script>
<template>
Page visits: {{ data }}
</template>
```
:LinkExample{link="/examples/composables/use-async-data"}
## `useLazyAsyncData`
This composable behaves identically to `useAsyncData` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
::ReadMore{link="/api/composables/use-lazy-async-data"}
::
### Example
```vue
<template>
<div>
{{ pending ? 'Loading' : count }}
</div>
</template>
<script setup>
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
// Because count starts out null, you won't have access
// to its contents immediately, but you can watch it.
})
</script>
```
## Refreshing Data
Sometimes throughout the course of your user's page visit, you may need to refresh the data loaded from the API. This can happen if the user chooses to paginate, filter results, search, etc.