[useFetch] How to get the result data?

I request server data in setup() function, this is my request:

setup() {
   ...
    const url = ref('http://xieyezi.com:9003/mock/11/airi/index')
    const { data,isFinished } =  useFetch(url).get().json()
    console.log('data:', data) 
    console.log('data.value:', unref(data))
    ...
}

when finish request , which data console is :

But the unref(data) is null, So how can I get the data.value ?

[wheatjs]

@kissu useFetch is async, so you will not be able to access it immediately even if it shows up in the console when you log it. So to access it you will need to await using something like await unil(isFinished).toBe(true) or watch the data object itself. So to access the email field you can try one of these

https://stackblitz.com/edit/vitejs-vite-avluye?file=src/App.vue

<script setup>
const { data } = useFetch('https://jsonplaceholder.typicode.com/users/1').get().json()

watch(data, (user) => {
  console.log(user.email) // or data.value.email
})
</script>

or

https://stackblitz.com/edit/vitejs-vite-golgaa?file=src%2FApp.vue

<script setup>
const { data, isFinished } = useFetch('https://jsonplaceholder.typicode.com/users/1').get().json()

await unil(isFinished).toBe(true)

console.log(data.value.email)
</script>

Using console.log can be kind of misleading in this way because it will only actually resolve the object when you expand the tree. So the data may not actually be there when you log it, but when you go to expand the tree from a console.log it will be there as it just resolved the data.

[wheatjs]

When you console log data it is a reference and will also update in the console when the value changes. Logging data.value will give you the value of data at the exact time you log it. Instead you can do something like. You could either use a watch to wait for the data like

const { data, isFinished } = useFetch()

watch(isFinished, () => {
  if (isFinished)
    console.log(data.value)
}):

or you can use until

const { data, isFinished } = useFetch()

await unil(isFinished).toBe(true)
console.log(data.value)