Vue Composition Api .value returns null

Question

我有一个"可堆肥的"；axios的功能类似于

export const useFetch = (url: string, config: any = {}) => {
const data = ref(null)
const status = ref()
const error = ref(null)
const loading = ref(false)
const fetch = async () => {
loading.value = true
error.value = null
try {
const result = await service.request({
url,
...config
})
status.value = result.status
data.value = result.data
} catch (ex) {
error.value = ex
} finally {
loading.value = false
}
}
fetch()
return { status, error, data, loading }
}

在user.vue这样一个单独的文件中，我像这样调用useFetch

setup() {
const { data, error } = useFetch(
'https://jsonplaceholder.typicode.com/po3sts/1',
{
method: 'get'
}
)
console.error(error)
console.error(error.value)
return { data, error }
}

我的问题是当我控制台错误，我可以清楚地看到

Object { value: Getter & Setter }
value: Error: Request failed with status code 404

但如果我执行console.error(error.value(，它将返回null。

关于如何获取error.value，有什么建议吗？

Answer 1

console.error(error.value)输出此时的实际值，而console.error(error)通过引用将对象传递到控制台，并允许稍后访问更新的对象属性，这就是ref模式所寻址的用例。

useFetch是异步的，结果不应该立即可用。对于组合API，结果应该被访问为：

watch(loading, loadingValue => {
if (!loadingValue)
console.error(error.value)
})

或者，钩子可以被修改以返回可以被链接的承诺，这与组合API正交，但它的用途是用承诺控制流组成钩子结果：

...
const promise = fetch()
return { status, error, data, loading, promise }
...

和

onMounted(async () => {
await promise
console.error(error.value)
})