$fetch
Nuxt 使用 ofetch 来全局暴露 `$fetch` 助手，以便在 Vue 应用或 API 路由中进行 HTTP 请求。
Nuxt 使用 ofetch 来全局暴露 $fetch 助手，以便在 Vue 应用或 API 路由中进行 HTTP 请求。
在服务器端渲染期间，调用
$fetch 来获取您的内部 API 路由将会直接调用相关函数（模拟请求），节省了一次额外的 API 调用。在组件中使用
$fetch 而不将其包裹在 useAsyncData 中会导致数据被两次获取：最初在服务器上，然后在客户端 hydration 期间再次获取，因为 $fetch 不会将服务器状态传递给客户端。因此，由于客户端必须再次获取数据，该 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'))
// 您还可以使用 Fetch 作为 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">Contact</button>
</template>
如果您在开发中使用
$fetch 来调用具有自签名证书的外部 HTTPS URL，您需要在环境中设置 NODE_TLS_REJECT_UNAUTHORIZED=0。