$fetch

源码
Nuxt 使用 ofetch 在全局暴露 `$fetch` 助手来在你的 Vue 应用或 API 路由中发起 HTTP 请求。

Maschinelle Übersetzung ·0 % geprüft

Nuxt 使用 ofetch 在全局暴露 $fetch 助手，以便在你的 Vue 应用或 API 路由中发起 HTTP 请求。

在服务器端渲染期间，调用 $fetch 获取内部的 API 路由时，会直接调用相应的函数（模拟请求），节省一次额外的 API 调用。
在组件中使用 $fetch，但不将其与 useAsyncData 一起使用，会导致数据被获取两次：最初在服务器上获取一次，然后在客户端水合期间再获取一次，因为 $fetch 不会将状态从服务器传递到客户端。因此，客户端必须重新获取数据，导致两端都会执行获取操作。

用法

我们建议使用 useFetch 或 useAsyncData + $fetch，以避免在获取组件数据时重复获取数据。

app/app.vue
<script setup lang="ts">
// Beim SSR werden die Daten zweimal abgerufen: einmal auf dem Server und einmal auf dem Client.
const dataTwice = await $fetch('/api/item')

// Beim SSR werden die Daten nur auf dem Server abgerufen und an den Client übertragen.
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// Du kannst auch useFetch als Kurzform für useAsyncData + $fetch verwenden
const { data } = await useFetch('/api/item')
</script>
Weitere Informationen findest du unter Docs > Getting Started > Data Fetching.

你可以在任何仅在客户端执行的方法中使用 $fetch。

app/pages/contact.vue
<script setup lang="ts">
async function contactForm () {
  await $fetch('/api/contact', {
    method: 'POST',
    body: { hello: 'world' },
  })
}
</script>

<template>
  <button @click="contactForm">
    Contact
  </button>
</template>
在 Nuxt 中，$fetch 是发起 HTTP 调用的首选方式，替代为 Nuxt 2 设计的 @nuxt/http 和 @nuxtjs/axios。
如果你在开发环境中使用 $fetch 调用带有自签名证书的（外部）HTTPS URL，你需要在环境中设置 NODE_TLS_REJECT_UNAUTHORIZED=0。

传递头部和 Cookie

当我们在浏览器中调用 $fetch 时，像 cookie 这样的用户头部会被直接发送到 API。

然而，在服务端渲染期间，由于安全风险，例如 服务器端请求伪造（SSRF） 或 认证滥用（Authentication Misuse），$fetch 不会包含用户的浏览器 cookies，也不会传递来自 fetch 响应的 cookies。

<script setup lang="ts">
// Dies leitet beim SSR weder Header noch Cookies weiter
const { data } = await useAsyncData(() => $fetch('/api/cookies'))
</script>

如果你需要在服务器上转发头部和 cookies，你必须手动传递它们：

app/pages/index.vue
<script setup lang="ts">
// Dies leitet die Header und Cookies der Nutzenden an `/api/cookies` weiter
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
</script>

然而，在服务器上使用相对 URL 调用 useFetch 时，Nuxt 会使用 useRequestFetch 代理头部和 cookies（host 等不应转发的头部除外）。