Nuxt4 官网地址: https://nuxt.com.cn
数据获取
$fetch是 Nuxt 提供的一个基于 fetch API 的封装，用于在服务端和客户端获取数据。useAsyncData是 Nuxt 提供的一个用于异步数据获取的composable函数，它可以在服务端和客户端分别获取数据，并将结果传递到客户端。useFetch是useAsyncData+$fetch的简写方式，用于在服务端和客户端分别获取数据，并将结果传递到客户端。
html
<script setup lang="ts">
// SSR 期间：数据会在服务端和客户端分别获取一次
const dataTwice = await $fetch("/api/item");
// SSR 期间：数据只在服务端获取，并传递到客户端
const { data } = await useAsyncData("item", () => $fetch("/api/item"));
// useFetch 是 useAsyncData + $fetch 的简写方式
const { data } = await useFetch("/api/item");
</script>传递 Headers 和 Cookies
html
<script setup lang="ts">
// SSR 期间不会转发 headers 或 cookies
const { data } = await useAsyncData(() => $fetch('/api/cookies'))
</script>如果你需要在服务端转发 headers 和 cookies，必须手动传递它们：
html
<script setup lang="ts">
// 将用户的 headers 和 cookies 转发到 `/api/cookies`
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
</script>不过，当你在服务端使用 useFetch 并传递相对路径时，Nuxt 会自动使用 useRequestFetch 来代理 headers 和 cookies（除了像 host 这样的禁止转发的 header）。
评论 隐私政策