$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
。传递标头和 Cookie
当我们在浏览器中调用 $fetch
时,用户标头(如 cookie
)将直接发送到 API。
但是,在服务器端渲染期间,由于诸如 服务器端请求伪造 (SSRF) 或 身份验证滥用 等安全风险,$fetch
不会包含用户的浏览器 cookie,也不会传递 fetch 响应中的 cookie。
<script setup lang="ts">
// This will NOT forward headers or cookies during SSR
const { data } = await useAsyncData(() => $fetch('/api/cookies'))
</script>
如果您需要在服务器上转发标头和 cookie,则必须手动传递它们
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
来代理标头和 cookie(除了不打算转发的标头,如 host
)。