获取数据 useFetch

它会根据 URL 和获取选项自动生成密钥，根据服务器路由为请求 url 提供类型提示，并推断 API 响应类型。

useFetch

此可组合项为 useAsyncData 和 $fetch 提供了一个方便的包装器。

它会根据 URL 和获取选项自动生成密钥，根据服务器路由为请求 url 提供类型提示，并推断 API 响应类型。

useFetch 是一个可组合项，旨在直接在设置函数、插件或路由中间件中调用。它返回反应式可组合项并处理向 Nuxt 有效负载添加响应，以便它们可以从服务器传递到客户端，而无需在页面水合时在客户端重新获取数据。

类型

Signature

function useFetch<DataT, ErrorT>(
  url: string | Request | Ref<string | Request> | () => string | Request,
  options?: UseFetchOptions<DataT>
): Promise<AsyncData<DataT, ErrorT>>

type UseFetchOptions<DataT> = {
  key?: string
  method?: string
  query?: SearchParams
  params?: SearchParams
  body?: RequestInit['body'] | Record<string, any>
  headers?: Record<string, string> | [key: string, value: string][] | Headers
  baseURL?: string
  server?: boolean
  lazy?: boolean
  immediate?: boolean
  getCachedData?: (key: string, nuxtApp: NuxtApp) => DataT
  deep?: boolean
  dedupe?: 'cancel' | 'defer'
  default?: () => DataT
  transform?: (input: DataT) => DataT | Promise<DataT>
  pick?: string[]
  watch?: WatchSource[] | false
}

type AsyncData<DataT, ErrorT> = {
  data: Ref<DataT | null>
  pending: Ref<boolean>
  refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
  execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
  clear: () => void
  error: Ref<ErrorT | null>
  status: Ref<AsyncDataRequestStatus>
}

interface AsyncDataExecuteOptions {
  dedupe?: 'cancel' | 'defer'
}

type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'

参数

URL：要获取的 URL。
选项(扩展 unjs/ofetch 选项和 AsyncDataOptions) :
- method: 请求方法。
- query：使用 ufo 将查询搜索参数添加到 URL
- params: query 的别名
- body：请求正文 - 自动字符串化(如果传递了一个对象)。
- headers：请求标头。
- baseURL：请求的基本 URL。

可以为所有提取选项指定一个computed或ref值。如果更新，这些将被监视并使用任何新值自动发出新请求。

Option(来自 useAsyncData)：
- key：一个唯一的键，以确保可以跨请求正确地删除数据提取，如果没有提供，它将根据使用 useAsyncData 的静态代码位置生成。
- server: 是否在服务器上获取数据(默认为 true)。
- default：在异步函数解析之前设置数据默认值的工厂函数 - 特别适用于 lazy: true 选项。
- pick：仅从 handler 函数结果中选择此数组中的指定键。
- watch：观察一系列反应源并在它们发生变化时自动刷新获取结果。默认情况下会监视获取选项和 URL。
  您可以使用 watch: false 完全忽略反应源。与 immediate: false 一起，这允许完全手动的 useFetch。
- transform：可用于在解析后更改 handler 函数结果的函数。
- immediate：当设置为 false 时，将阻止请求立即触发。 (默认为true)

如果您提供一个函数或 ref 作为 url 参数，或者如果您提供函数作为 options 参数的参数，那么 useFetch 调用将不会匹配代码库中其他地方的其他 useFetch 调用，即使选项似乎是相同的。如果你想强制匹配，你可以在options中提供你自己的密钥。

返回值

data：传入的异步函数的结果。
pending：一个布尔值，指示是否仍在获取数据。
refresh/execute ：可用于刷新 handler 函数返回的数据的函数。
error：如果数据获取失败，则为错误对象。
status: 指示数据请求状态的字符串 ("idle", "pending", "success", "error").。

默认情况下，Nuxt 会等到“刷新”完成后才能再次执行。

如果您还没有在服务器上获取数据(例如，使用 server: false)，那么数据_不会_被获取，直到 hydration 完成。
这意味着即使您在客户端等待 useFetch，data 仍将在 <script setup> 中保持为空。

示例

const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains', {
  pick: ['title']
})

添加查询搜索参数：

使用query选项，您可以将搜索参数添加到查询中。此选项从 unjs/ofetch 扩展而来，并使用 unjs/ufo 创建 URL。对象自动字符串化。

const param1 = ref('value1')
const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains', {
  query: { param1, param2: 'value2' }
})

结果在：https://api.nuxtjs.dev/mountains?param1=value1&param2=value2

使用拦截器:

const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
  onRequest({ request, options }) {
    // Set the request headers
    options.headers = options.headers || {}
    options.headers.authorization = '...'
  },
  onRequestError({ request, options, error }) {
    // Handle the request errors
  },
  onResponse({ request, response, options }) {
    // Process the response data
    return response._data
  },
  onResponseError({ request, response, options }) {
    // Handle the response errors
  }
})

useFetch 是编译器转换后保留的函数名，所以你不应该命名你自己的函数useFetch。

案例演示：