Question

Nuxt 使用 ofetch 全局公开 $fetch 助手来发出 HTTP 请求。

Nuxt 使用 ofetch 在全局公开 $fetch 帮助器，用于在 Vue 应用程序或 API 路由中发出 HTTP 请求。

在服务器端渲染期间，调用$fetch 来获取您的内部API 路由 将直接调用相关函数（模拟请求），节省额外的API 调用 .

然而，在组件中使用 $fetch 而不用 useAsyncData 包装它会导致两次获取数据：最初在服务器上，然后在水合作用期间再次在客户端，因为 $fetch 不会将状态从服务器传输到 客户端。 因此，提取将在双方执行，因为客户端必须再次获取数据。

我们建议使用 useFetch 或 useAsyncData + $fetch 来防止在获取组件数据时重复获取数据。

vue

<script setup>
// 在 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>

相关阅读：getting-started > data-fetching

您可以将 $fetch 用于仅在客户端执行的任何方法。

vue

<script setup>
function contactForm() {
  $fetch('/api/contact', {
    method: 'POST',
    body: { hello: 'world '}
  })
}
</script>

<template>
  <button @click="contactForm">Contact</button>
</template>

$fetch 是在 Nuxt 中进行 HTTP 调用的首选方式，而不是 @nuxt/http 和 @nuxtjs/axios是为 Nuxt 2 制作的。