数据获取
Nuxt 提供了两个 composables 和一个内置库,用于在浏览器或服务器环境中执行数据获取:useFetch
、useAsyncData
和 $fetch
。
简而言之
$fetch
是发起网络请求的最简单方法。useFetch
是$fetch
的包装器,它只在通用渲染中获取一次数据。useAsyncData
与useFetch
类似,但提供更细粒度的控制。
useFetch
和 useAsyncData
都共享一组通用的选项和模式,我们将在最后几节中详细介绍。
为什么需要 useFetch
和 useAsyncData
Nuxt 是一个框架,可以在服务器和客户端环境中运行同构(或通用)代码。如果在 Vue 组件的 setup 函数中使用$fetch
函数执行数据获取,可能会导致数据被获取两次,一次在服务器上(用于渲染 HTML),另一次在客户端上(当 HTML 被水合时)。这可能会导致水合问题,增加交互时间并导致不可预测的行为。
useFetch
和 useAsyncData
composables 通过确保在服务器上进行 API 调用时,数据会被转发到有效负载中的客户端来解决此问题。
Payload 是一个 JavaScript 对象,可以通过 useNuxtApp().payload
访问。它在客户端使用,以避免在浏览器 水合作用 期间执行代码时重新获取相同的数据。
<script setup lang="ts">
const { data } = await useFetch('/api/data')
async function handleFormSubmit() {
const res = await $fetch('/api/submit', {
method: 'POST',
body: {
// My form data
}
})
}
</script>
<template>
<div v-if="data == null">
No data
</div>
<div v-else>
<form @submit="handleFormSubmit">
<!-- form input tags -->
</form>
</div>
</template>
在上面的示例中,useFetch
将确保请求发生在服务器端,并正确转发到浏览器。$fetch
没有这种机制,因此当请求仅来自浏览器时,使用它是更好的选择。
Suspense
Nuxt 在底层使用 Vue 的 <Suspense>
组件,以防止在视图中所有异步数据可用之前进行导航。数据获取组合式函数可以帮助您利用此功能,并根据每个调用的情况使用最适合的方式。
<NuxtLoadingIndicator>
来在页面导航之间添加进度条。$fetch
Nuxt 包括 ofetch 库,并在您的应用程序中全局自动导入为 $fetch
别名。
<script setup lang="ts">
async function addTodo() {
const todo = await $fetch('/api/todos', {
method: 'POST',
body: {
// My todo data
}
})
}
</script>
将客户端标头传递到 API
在服务器端渲染期间,由于 $fetch
请求在服务器内部进行,因此它不会包含用户的浏览器 Cookie。
我们可以使用 useRequestHeaders
从服务器端访问 Cookie 并将其代理到 API。
下面的示例将请求标头添加到同构的 $fetch
调用中,以确保 API 端点可以访问用户最初发送的相同 cookie
标头。
<script setup lang="ts">
const headers = useRequestHeaders(['cookie'])
async function getCurrentUser() {
return await $fetch('/api/me', { headers: headers.value })
}
</script>
host
,accept
content-length
,content-md5
,content-type
x-forwarded-host
,x-forwarded-port
,x-forwarded-proto
cf-connecting-ip
,cf-ray
useRequestFetch
将标头自动代理到调用中。useFetch
useFetch
组合式函数在底层使用 $fetch
在 setup 函数中进行 SSR 安全的网络调用。
<script setup lang="ts">
const { data: count } = await useFetch('/api/count')
</script>
<template>
<p>Page visits: {{ count }}</p>
</template>
此组合式函数是 useAsyncData
组合式函数和 $fetch
工具的包装。
useAsyncData
useAsyncData
组合式函数负责包装异步逻辑,并在解析后返回结果。
useFetch(url)
几乎等效于 useAsyncData(url, () => event.$fetch(url))
。它是最常见用例的开发者体验糖。(您可以在
useRequestFetch
中找到有关 event.fetch
的更多信息。)在某些情况下,使用 useFetch
组合式函数是不合适的,例如当 CMS 或第三方提供他们自己的查询层时。在这种情况下,您可以使用 useAsyncData
来包装您的调用,并仍然保留组合式函数提供的优点。
<script setup lang="ts">
const { data, error } = await useAsyncData('users', () => myGetFunction('users'))
// This is also possible:
const { data, error } = await useAsyncData(() => myGetFunction('users'))
</script>
useAsyncData
的第一个参数是一个唯一的键,用于缓存第二个参数(查询函数)的响应。可以通过直接传递查询函数来忽略此键,该键将自动生成。由于自动生成的键仅考虑调用
useAsyncData
的文件和行,因此建议始终创建自己的键以避免不必要的行为,例如当您创建自己的自定义组合式函数包装 useAsyncData
时。设置键对于在组件之间使用
useNuxtData
共享相同数据或刷新特定数据 非常有用。<script setup lang="ts">
const { id } = useRoute().params
const { data, error } = await useAsyncData(`user:${id}`, () => {
return myGetFunction('users', { id })
})
</script>
useAsyncData
组合式函数是包装和等待多个 $fetch
请求完成,然后处理结果的好方法。
<script setup lang="ts">
const { data: discounts, status } = await useAsyncData('cart-discount', async () => {
const [coupons, offers] = await Promise.all([
$fetch('/cart/coupons'),
$fetch('/cart/offers')
])
return { coupons, offers }
})
// discounts.value.coupons
// discounts.value.offers
</script>
返回值
useFetch
和 useAsyncData
具有下面列出的相同返回值。
data
:传入的异步函数的结果。refresh
/execute
:可用于刷新handler
函数返回的数据的函数。clear
:可用于将data
设置为undefined
,将error
设置为null
,将status
设置为idle
,并将任何当前挂起的请求标记为已取消的函数。error
:如果数据获取失败,则为错误对象。status
:指示数据请求状态的字符串("idle"
、"pending"
、"success"
、"error"
)。
data
、error
和 status
是 Vue refs,可以在 <script setup>
中使用 .value
访问。默认情况下,Nuxt 会等待 refresh
完成,然后才能再次执行。
server: false
),那么直到水合作用完成,数据才会被获取。这意味着即使您在客户端等待 useFetch
,data
在 <script setup>
中仍将为 null。选项
useAsyncData
和 useFetch
返回相同的对象类型,并接受一组通用的选项作为它们的最后一个参数。它们可以帮助您控制组合式函数的行为,例如导航阻止、缓存或执行。
Lazy
默认情况下,数据获取组合式函数将等待它们的异步函数解析,然后再使用 Vue 的 Suspense 导航到新页面。可以使用 lazy
选项在客户端导航时忽略此功能。在这种情况下,您必须使用 status
值手动处理加载状态。
<script setup lang="ts">
const { status, data: posts } = useFetch('/api/posts', {
lazy: true
})
</script>
<template>
<!-- you will need to handle a loading state -->
<div v-if="status === 'pending'">
Loading ...
</div>
<div v-else>
<div v-for="post in posts">
<!-- do something -->
</div>
</div>
</template>
或者,您可以使用 useLazyFetch
和 useLazyAsyncData
作为执行相同操作的便捷方法。
<script setup lang="ts">
const { status, data: posts } = useLazyFetch('/api/posts')
</script>
仅限客户端的获取
默认情况下,数据获取组合式函数将在客户端和服务器环境中执行其异步函数。将 server
选项设置为 false
以仅在客户端执行调用。在初始加载时,数据不会在水合作用完成之前获取,因此您必须处理挂起状态,尽管在随后的客户端导航中,数据将在加载页面之前等待。
与 lazy
选项结合使用,这对于第一个渲染不需要的数据(例如,非 SEO 敏感数据)非常有用。
/* This call is performed before hydration */
const articles = await useFetch('/api/article')
/* This call will only be performed on the client */
const { status, data: comments } = useFetch('/api/comments', {
lazy: true,
server: false
})
useFetch
组合式函数旨在在 setup 方法中调用,或直接在生命周期钩子的函数顶层调用,否则您应该使用 $fetch
方法。
最小化 payload 大小
pick
选项可帮助您通过仅选择您希望从组合式函数返回的字段来最小化存储在 HTML 文档中的 payload 大小。
<script setup lang="ts">
/* only pick the fields used in your template */
const { data: mountain } = await useFetch('/api/mountains/everest', {
pick: ['title', 'description']
})
</script>
<template>
<h1>{{ mountain.title }}</h1>
<p>{{ mountain.description }}</p>
</template>
如果您需要更多控制或映射多个对象,则可以使用 transform
函数来更改查询的结果。
const { data: mountains } = await useFetch('/api/mountains', {
transform: (mountains) => {
return mountains.map(mountain => ({ title: mountain.title, description: mountain.description }))
}
})
pick
和 transform
都不会阻止最初获取不需要的数据。但它们将阻止不需要的数据添加到从服务器传输到客户端的 payload 中。缓存和重新获取
键
useFetch
和 useAsyncData
使用键来防止重新获取相同的数据。
useFetch
使用提供的 URL 作为键。或者,可以在作为最后一个参数传递的options
对象中提供key
值。useAsyncData
如果第一个参数是字符串,则将其用作键。如果第一个参数是执行查询的处理函数,那么将为您生成一个对于useAsyncData
实例的文件名和行号唯一的键。
useNuxtData
刷新和执行
如果您想手动获取或刷新数据,请使用组合式函数提供的 execute
或 refresh
函数。
<script setup lang="ts">
const { data, error, execute, refresh } = await useFetch('/api/users')
</script>
<template>
<div>
<p>{{ data }}</p>
<button @click="() => refresh()">Refresh data</button>
</div>
</template>
execute
函数是 refresh
的别名,其工作方式完全相同,但在获取不是 立即执行的情况下更具语义性。
clearNuxtData
和 refreshNuxtData
。清除
如果您想清除提供的数据,无论出于何种原因,而无需知道传递给 clearNuxtData
的特定键,您可以使用组合式函数提供的 clear
函数。
<script setup lang="ts">
const { data, clear } = await useFetch('/api/users')
const route = useRoute()
watch(() => route.path, (path) => {
if (path === '/') clear()
})
</script>
监听
要让您的获取函数在应用程序中其他响应式值发生变化时重新运行,请使用 watch
选项。您可以将其用于一个或多个可监听元素。
<script setup lang="ts">
const id = ref(1)
const { data, error, refresh } = await useFetch('/api/users', {
/* Changing the id will trigger a refetch */
watch: [id]
})
</script>
请注意,监听响应式值不会更改获取的 URL。例如,这将始终获取用户的相同初始 ID,因为 URL 是在调用函数时构建的。
<script setup lang="ts">
const id = ref(1)
const { data, error, refresh } = await useFetch(`/api/users/${id.value}`, {
watch: [id]
})
</script>
如果您需要根据响应式值更改 URL,您可能需要使用 计算 URL。
计算 URL
有时您可能需要从响应式值计算 URL,并在这些值每次更改时刷新数据。与其费力地处理,您可以将每个参数作为响应式值附加。Nuxt 将自动使用响应式值,并在每次更改时重新获取数据。
<script setup lang="ts">
const id = ref(null)
const { data, status } = useLazyFetch('/api/user', {
query: {
user_id: id
}
})
</script>
对于更复杂的 URL 构建,您可以使用回调函数作为 计算 getter,它返回 URL 字符串。
每次依赖项更改时,都会使用新构建的 URL 获取数据。将其与 非立即相结合,您可以等到响应式元素更改后再进行获取。
<script setup lang="ts">
const id = ref(null)
const { data, status } = useLazyFetch(() => `/api/users/${id.value}`, {
immediate: false
})
const pending = computed(() => status.value === 'pending');
</script>
<template>
<div>
<!-- disable the input while fetching -->
<input v-model="id" type="number" :disabled="pending"/>
<div v-if="status === 'idle'">
Type an user ID
</div>
<div v-else-if="pending">
Loading ...
</div>
<div v-else>
{{ data }}
</div>
</div>
</template>
如果需要在其他响应式值更改时强制刷新,您还可以 监听其他值。
非立即
useFetch
组合式函数会在调用时立即开始获取数据。您可以通过设置 immediate: false
来阻止这种情况,例如,等待用户交互。
这样,您将需要 status
来处理获取生命周期,以及 execute
来启动数据获取。
<script setup lang="ts">
const { data, error, execute, status } = await useLazyFetch('/api/comments', {
immediate: false
})
</script>
<template>
<div v-if="status === 'idle'">
<button @click="execute">Get data</button>
</div>
<div v-else-if="status === 'pending'">
Loading comments...
</div>
<div v-else>
{{ data }}
</div>
</template>
为了更精细的控制,status
变量可以是
idle
当获取尚未开始时pending
当获取已开始但尚未完成时error
当获取失败时success
当获取成功完成时
传递标头和 Cookie
当我们在浏览器中调用 $fetch
时,用户标头(如 cookie
)将直接发送到 API。
通常,在服务器端渲染期间,由于 $fetch
请求是在服务器内部“内部”进行的,它不会包含用户的浏览器 Cookie,也不会传递来自 fetch 响应的 Cookie。
但是,当在服务器上调用 useFetch
时,Nuxt 将使用 useRequestFetch
来代理标头和 Cookie(除了不应该转发的标头,如 host
)。
在 SSR 响应上从服务器端 API 调用传递 Cookie
如果您想将 Cookie 从内部请求传递回客户端,您需要自己处理。
import { appendResponseHeader } from 'h3'
import type { H3Event } from 'h3'
export const fetchWithCookie = async (event: H3Event, url: string) => {
/* Get the response from the server endpoint */
const res = await $fetch.raw(url)
/* Get the cookies from the response */
const cookies = res.headers.getSetCookie()
/* Attach each cookie to our incoming Request */
for (const cookie of cookies) {
appendResponseHeader(event, 'set-cookie', cookie)
}
/* Return the data of the response */
return res._data
}
<script setup lang="ts">
// This composable will automatically pass cookies to the client
const event = useRequestEvent()
const { data: result } = await useAsyncData(() => fetchWithCookie(event!, '/api/with-cookie'))
onMounted(() => console.log(document.cookie))
</script>
Options API 支持
Nuxt 提供了一种在 Options API 中执行 asyncData
获取的方法。您必须将组件定义包裹在 defineNuxtComponent
中才能使其正常工作。
<script>
export default defineNuxtComponent({
/* Use the fetchKey option to provide a unique key */
fetchKey: 'hello',
async asyncData () {
return {
hello: await $fetch('/api/hello')
}
}
})
</script>
<script setup>
或 <script setup lang="ts">
来声明 Vue 组件。将数据从服务器序列化到客户端
当使用 useAsyncData
和 useLazyAsyncData
将在服务器上获取的数据传输到客户端(以及其他任何使用 Nuxt payload 的内容)时,payload 会使用 devalue
进行序列化。这使我们不仅可以传输基本的 JSON,还可以序列化和恢复/反序列化更高级的数据类型,例如正则表达式、日期、Map 和 Set、ref
、reactive
、shallowRef
、shallowReactive
和 NuxtError
等等。
还可以为您 Nuxt 不支持的类型定义自己的序列化器/反序列化器。您可以在 useNuxtApp
文档中阅读更多信息。
$fetch
或 useFetch
获取时 - 有关更多信息,请参阅下一节。序列化来自 API 路由的数据
当从 server
目录获取数据时,响应使用 JSON.stringify
进行序列化。但是,由于序列化仅限于 JavaScript 原始类型,Nuxt 会尽力转换 $fetch
和 useFetch
的返回类型,以匹配实际值。
示例
export default defineEventHandler(() => {
return new Date()
})
<script setup lang="ts">
// Type of `data` is inferred as string even though we returned a Date object
const { data } = await useFetch('/api/foo')
</script>
自定义序列化函数
要自定义序列化行为,您可以在返回的对象上定义一个 toJSON
函数。如果您定义了一个 toJSON
方法,Nuxt 将遵守该函数的返回类型,并且不会尝试转换类型。
export default defineEventHandler(() => {
const data = {
createdAt: new Date(),
toJSON() {
return {
createdAt: {
year: this.createdAt.getFullYear(),
month: this.createdAt.getMonth(),
day: this.createdAt.getDate(),
},
}
},
}
return data
})
<script setup lang="ts">
// Type of `data` is inferred as
// {
// createdAt: {
// year: number
// month: number
// day: number
// }
// }
const { data } = await useFetch('/api/bar')
</script>
使用替代序列化器
Nuxt 当前不支持 JSON.stringify
的替代序列化器。但是,您可以将 payload 作为普通字符串返回,并利用 toJSON
方法来保持类型安全。
在下面的示例中,我们使用 superjson 作为我们的序列化器。
import superjson from 'superjson'
export default defineEventHandler(() => {
const data = {
createdAt: new Date(),
// Workaround the type conversion
toJSON() {
return this
}
}
// Serialize the output to string, using superjson
return superjson.stringify(data) as unknown as typeof data
})
<script setup lang="ts">
import superjson from 'superjson'
// `date` is inferred as { createdAt: Date } and you can safely use the Date object methods
const { data } = await useFetch('/api/superjson', {
transform: (value) => {
return superjson.parse(value as unknown as string)
},
})
</script>
技巧
通过 POST 请求使用 SSE (Server Sent Events)
EventSource
或 VueUse 组合式函数 useEventSource
。当通过 POST 请求使用 SSE 时,您需要手动处理连接。这是您可以执行此操作的方式
// Make a POST request to the SSE endpoint
const response = await $fetch<ReadableStream>('/chats/ask-ai', {
method: 'POST',
body: {
query: "Hello AI, how are you?",
},
responseType: 'stream',
})
// Create a new ReadableStream from the response with TextDecoderStream to get the data as text
const reader = response.pipeThrough(new TextDecoderStream()).getReader()
// Read the chunk of data as we get it
while (true) {
const { value, done } = await reader.read()
if (done)
break
console.log('Received:', value)
}