我正在为一个项目使用nuxt 3,我想向/server/api/
目录中的一个typescript文件发出请求。但是当我在我的文件app.vue中这样做时:
<script setup lang="ts">
const createPerson = async () => {
console.log('create person')
const data = await useAsyncData('createPerson', () => $fetch('/api/file', {
method: 'POST',
headers: useRequestHeaders(['cookie']),
body: JSON.stringify({
lastname: fields.value.lastname,
firstname: fields.value.firstname,
age: fields.value.age,
x: fields.value.x,
y: fields.value.y,
bio: fields.value.bio
})
}))
console.log(data)
}
</script>
当我调用createPerson函数时:
<button @click="createPerson">Apply</button>
我的应用程序只获取'/API/file'一次,而不是重新获取。如果我使用useAsyncData提供的刷新功能,第一次点击按钮时,我有两次获取,一次获取后。
2条答案
按热度按时间ao218c7q1#
如果您不需要
useAsyncData
/useFetch
的额外功能,您可以通过单独使用$fetch
实用程序来简化。您也不需要使用
JSON.stringify
,h3
提供了useBody
组合函数,它将解析请求的主体。63lcw9qa2#
要回答你的问题,你需要添加一个键到useAsyncData来强制刷新你的请求。重新获取不发生的原因是因为
createPerson
作为键保持不变,所以不执行重新获取。所以你需要做的就是使用你喜欢的useAsyncData方法生成一个随机键您还可以选择使用刷新功能,而不必担心密钥。https://nuxt.com/docs/getting-started/data-fetching#refreshing-data