$fetch
Nuxt 使用 ofetch 在全局范围内公开 $fetch 辅助函数，用于发出 HTTP 请求。
Nuxt 使用 ofetch 在全局范围内公开 $fetch 辅助函数，用于在 Vue 应用或 API 路由中发出 HTTP 请求。
在服务器端渲染期间，调用
$fetch 来获取内部 API 路由 将直接调用相关函数（模拟请求），**从而节省额外的 API 调用**。在组件中使用
$fetch 而不将其包装在 useAsyncData 中会导致数据被获取两次：最初在服务器端，然后在客户端水合期间再次获取，因为 $fetch 不会将状态从服务器传输到客户端。因此，fetch 将在两端执行，因为客户端必须再次获取数据。我们建议使用 useFetch 或 useAsyncData + $fetch 来防止在获取组件数据时出现重复数据获取。
app.vue
<script setup lang="ts">
// During SSR data is fetched twice, once on the server and once on the client.
const dataTwice = await $fetch('/api/item')
// During SSR data is fetched only on the server side and transferred to the client.
const { data } = await useAsyncData('item', () => $fetch('/api/item'))
// You can also useFetch as shortcut of 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。