v3.17

$fetch

Source
Nuxt 使用 ofetch 全局公开 $fetch 辅助函数，用于发出 HTTP 请求。

Nuxt 使用 ofetch 全局公开 $fetch 辅助函数，以便在 Vue 应用或 API 路由中发出 HTTP 请求。

¥Nuxt uses ofetch to expose globally the $fetch helper for making HTTP requests within your Vue app or API routes.

在服务器端渲染期间，调用 $fetch 来获取内部 API 路线 将直接调用相关函数（模拟请求），从而节省额外的 API 调用。¥During server-side rendering, calling $fetch to fetch your internal API routes will directly call the relevant function (emulating the request), saving an additional API call.
在组件中使用 $fetch 而不使用 useAsyncData 封装会导致数据获取两次：最初在服务器上执行，然后在客户端进行 hydration 操作时再次执行，因为 $fetch 不会将状态从服务器传输到客户端。因此，获取操作将在两端执行，因为客户端必须再次获取数据。¥Using $fetch in components without wrapping it with useAsyncData causes fetching the data twice: initially on the server, then again on the client-side during hydration, because $fetch does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again.

用法

¥Usage

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

¥We recommend to use useFetch or useAsyncData + $fetch to prevent double data fetching when fetching the component data.

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>
Read more in Docs > Getting Started > Data Fetching.

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

¥You can use $fetch in any methods that are executed only on client-side.

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>
$fetch 是在 Nuxt 中进行 HTTP 调用的首选方式，而不是为 Nuxt 2 设计的 @nuxt/http 和 @nuxtjs/axios。
如果你在开发环境中使用 $fetch 调用带有自签名证书的（外部）HTTPS URL，则需要在你的环境中设置 NODE_TLS_REJECT_UNAUTHORIZED=0。

传递标头和 Cookie

¥Passing Headers and Cookies

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

¥When we call $fetch in the browser, user headers like cookie will be directly sent to the API.

但是，在服务器端渲染 (SSR) 期间，由于服务器端请求伪造 (SSRF) 或身份验证滥用等安全风险，$fetch 不会包含用户的浏览器 cookie，也不会传递来自 fetch 响应的 cookie。

¥However, during Server-Side Rendering, due to security risks such as Server-Side Request Forgery (SSRF) or Authentication Misuse, the $fetch wouldn't include the user's browser cookies, nor pass on cookies from the fetch response.

<script setup lang="ts">
// This will NOT forward headers or cookies during SSR
const { data } = await useAsyncData(() => $fetch('/api/cookies'))
</script>

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

¥If you need to forward headers and cookies on the server, you must manually pass them:

pages/index.vue
<script setup lang="ts">
// This will forward the user's headers and cookies to `/api/cookies`
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
</script>

然而，当使用服务器上的相对 URL 调用 useFetch 时，Nuxt 将使用 useRequestFetch 来代理 headers 和 cookies（不打算转发的 headers 除外，例如 host）。

¥However, when calling useFetch with a relative URL on the server, Nuxt will use useRequestFetch to proxy headers and cookies (with the exception of headers not meant to be forwarded, like host).