Nuxt中useFetch响应值无法立即访问的问题求助

问题根源 #

你遇到的情况是因为useFetch返回的AsyncData对象里，data是Vue的响应式ref容器。虽然then回调触发时API请求已经完成，但Vue的响应式更新属于微任务队列，此时data.value的赋值还未完成，直接访问会得到null。而setTimeout是宏任务，会等所有微任务执行完毕后再触发，这时data.value已经被正确赋值。

正确解决方案 #

方案1：顶层直接使用useFetch（推荐）

Nuxt的useFetch设计为直接在组件setup顶层调用，无需包裹在onBeforeMount这类生命周期钩子中，Nuxt会自动处理请求时机和响应式跟踪：

const { data, error } = useFetch('/listings')

// 监听data变化，确保获取到有效值后再处理
watch(data, (newListings) => {
  if (newListings) {
    console.log(newListings)
    // 在这里处理你的业务逻辑
  }
}, { immediate: true })

方案2：使用顶层await（支持Nuxt3+）

如果需要在代码中立即处理数据，可以直接在setup顶层使用await，Nuxt支持顶层await语法：

const { data, error } = await useFetch('/listings')

if (data.value) {
  console.log(data.value)
  // 后续业务逻辑
}

方案3：在生命周期钩子中使用async/await

一定要在onBeforeMount或onMounted中调用的话，需要用异步函数并await：

onBeforeMount(async () => {
  const { data, error } = await useFetch('/listings')
  if (data.value) {
    console.log(data.value)
  }
})

为什么你的原代码不生效 #

原代码中useFetch().then(response => { console.log(response.data.value) })的问题在于，useFetch的Promise resolve时，内部还未完成对data这个ref的赋值操作（该赋值属于Vue的微任务队列），此时response.data.value还未更新。而setTimeout会延迟到宏任务阶段执行，此时微任务已经处理完毕，data.value自然能拿到正确值。

内容的提问来源于stack exchange，提问作者Renato Maretić