useFetch() 响应值不可访问

Question

我正在使用Nuxt的

useFetch

方法从API中获取数据，我遇到了无法立即访问响应数据的问题：

onBeforeMount(() => {
    useFetch('/listings')
        .then(response => {
            console.log(response.data.value)
        })
        .catch(err => {
            console.log(err)
        })
})

console.log

正在记录

null

，但是如果我将

setTimeout

添加到

.then

块，那么它正在工作，并返回一个

array of objects

：

setTimeout(() => {
   console.log(response.data.value)
}, 1000)

仅记录

response.data

（没有

.value

）返回一个具有

proxy object

的

_value

，我可以从控制台访问该值，但尝试直接使用

response.data.value

访问它是行不通的。此外，通过检查浏览器的网络选项卡和后端日志，我可以看到 API 正在返回一个对象数组。

我也尝试通过声明数据变量并使用

useFetch

来使用

async/await

方法，但结果相同。

感谢任何帮助！

Answer 1

useFetch()

返回承诺。

仔细查看文档，特别是推荐的使用语法：

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

// here you can use data, pending or error, 
// because this code runs after `useFetch()` resolved.

你错过了

await

.