Nuxt 3:useAsyncData与$fetch只工作一次

Question

我正在为一个项目使用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提供的刷新功能，第一次单击按钮时，我有两次提取，一次提取后。

Answer 1

要回答您的问题，您需要添加一个密钥来使用AsyncData来强制刷新您的请求。没有发生refetch的原因是作为密钥的createPerson保持不变，因此不执行refetch。因此，您所需要做的就是使用AsyncData 的任何一种方法生成一个随机密钥

<script setup lang="ts">
const createPerson = async () => {
console.log('create person')
const data = await useAsyncData(RANDOM_KEY, () => $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>

您还可以选择使用刷新功能，而无需担心密钥。检查文档https://nuxt.com/docs/getting-started/data-fetching#refreshing-数据

Answer 2

如果不需要useAsyncData/useFetch的额外功能，只需单独使用$fetch实用程序即可简化。

<script lang="ts" setup>
const createPerson = async () => {
const data = await $fetch('/api/file', {
method: 'POST',
headers: useRequestHeaders(['cookie']),
body: {
lastname: fields.value.lastname,
firstname: fields.value.firstname,
age: fields.value.age,
x: fields.value.x,
y: fields.value.y,
bio: fields.value.bio,
},
})
// ...
}
</script>

您也不需要使用JSON.stringify，h3提供了可组合的readBody，它将解析请求的主体。

// server/api/file.ts
export default defineEventHandler(async (event) => {
const { age, bio, firstname, lastname, x, y } = await readBody(event)
// ...
})