$fetch
Nuxt使用ofetch来全局暴露`$fetch`辅助函数，用于在Vue应用程序或API路由中进行HTTP请求。
Nuxt使用ofetch来全局暴露$fetch辅助函数，用于在Vue应用程序或API路由中进行HTTP请求。
在服务器端渲染期间，调用
$fetch来获取内部API路由将直接调用相关函数（模拟请求），节省了额外的API调用。在组件中使用
$fetch而不使用useAsyncData进行包装会导致数据被获取两次：首先在服务器端获取，然后在客户端进行混合渲染期间再次获取，因为$fetch不会将状态从服务器传递到客户端。因此，获取将在两端执行，因为客户端需要再次获取数据。我们建议在获取组件数据时使用useFetch或useAsyncData + $fetch来防止重复获取数据。
app.vue
<script setup lang="ts">
// 在SSR中数据将被获取两次，一次在服务器端，一次在客户端。
const dataTwice = await $fetch('/api/item')
// 在SSR中，数据仅在服务器端获取并传递到客户端。
const { data } = await useAsyncData('item', () => $fetch('/api/item'))
// 你也可以使用useFetch作为useAsyncData + $fetch的快捷方式
const { data } = await useFetch('/api/item')
</script>
你可以在只在客户端执行的任何方法中使用$fetch。
pages/contact.vue
<script setup lang="ts">
function contactForm() {
$fetch('/api/contact', {
method: 'POST',
body: { hello: 'world '}
})
}
</script>
<template>
<button @click="contactForm">联系我们</button>
</template>