What is the difference between useFetch and useAsyncData??

[harblaith7]

Based on the documentation, it says that:

useAsyncData can be used within your pages, components, and plugins to get access to data that resolves asynchronously

and

useFetch can be used within your pages, components, and plugins to get universally fetch from any URL.

I am a little confused by this. So useFetch is not for data that resolvers asynchronously? useAsyncData doesn't fetch data from any url?

[wobsoriano]

useAsyncData accepts any function that returns a promise.

You might understand it better with an example.

Say you want to fetch todos using useAsyncData:

<script setup lang="ts">
// todos here can be whatever. It's a unique key to ensure that data fetching can be properly de-duplicated across requests.
const { data } = useAsyncData('todos', () =>  $fetch('https://jsonplaceholder.typicode.com/todos'))
</script>

and using useFetch:

<script setup lang="ts">
// a key is not required as it automatically generates a key based on url.
const { data } = useFetch('https://jsonplaceholder.typicode.com/todos')
</script>

[harblaith7]

Thanks, that is clearing it up. How would it work if you want to add additional logic in the function? Would it work like so?

<script setup lang="ts">
const { data } = useAsyncData('todos', async () =>  {
      const theData = await $fetch('https://jsonplaceholder.typicode.com/todos');
      ... some logic ....
      return theData
})
</script>

[wobsoriano]

yeah that should work