このComposableは、useAsyncDataと$fetchの便利なラッパーを提供します。URLとフェッチオプションに基づいてキーを自動生成し、サーバールートに基づいてリクエストURLの型ヒントを提供し、APIレスポンスタイプを推測します。

使用法

const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
  pick: ['title']
})

queryオプションを使用すると、クエリに検索パラメータを追加できます。このオプションはunjs/ofetchから拡張されており、URLの作成にはunjs/ufoを使用しています。オブジェクトは自動的に文字列化されます。

const param1 = ref('value1')
const { data, status, error, refresh } = await useFetch('/api/modules', {
  query: { param1, param2: 'value2' }
})

上記の例はhttps://api.nuxt.com/modules?param1=value1&param2=value2となります。

また、インターセプターを使用することもできます：

const { data, status, error, refresh, clear } = await useFetch('/api/auth/login', {
  onRequest({ request, options }) {
    // リクエストヘッダーを設定
    // これはofetch >= 1.4.0に依存していることに注意 - ロックファイルを更新する必要があるかもしれません
    options.headers.set('Authorization', '...')
  },
  onRequestError({ request, options, error }) {
    // リクエストエラーを処理
  },
  onResponse({ request, response, options }) {
    // レスポンスデータを処理
    localStorage.setItem('token', response._data.token)
  },
  onResponseError({ request, response, options }) {
    // レスポンスエラーを処理
  }
})

リアクティブキーと共有状態

URLとしてcomputed refまたは通常のrefを使用することで、URLが変更されると自動的に更新される動的なデータフェッチが可能です：

const route = useRoute()
const id = computed(() => route.params.id)

// ルートが変更されidが更新されると、データは自動的に再フェッチされます
const { data: post } = await useFetch(() => `/api/posts/${id.value}`)

同じURLとオプションで複数のコンポーネントでuseFetchを使用する場合、それらは同じdata、error、statusのrefを共有します。これにより、コンポーネント間での一貫性が確保されます。

型

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, ctx: AsyncDataRequestContext) => DataT | undefined
  deep?: boolean
  dedupe?: 'cancel' | 'defer'
  default?: () => DataT
  transform?: (input: DataT) => DataT | Promise<DataT>
  pick?: string[]
  watch?: WatchSource[] | false
}

type AsyncDataRequestContext = {
  /** このデータリクエストの理由 */
  cause: 'initial' | 'refresh:manual' | 'refresh:hook' | 'watch'
}

type AsyncData<DataT, ErrorT> = {
  data: Ref<DataT | null>
  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 (string | Request | Ref<string | Request> | () => string | Request): フェッチするURLまたはリクエスト。文字列、Requestオブジェクト、Vueのref、または文字列/Requestを返す関数で指定可能。動的エンドポイントのリアクティビティをサポート。

• options (object): フェッチリクエストの設定。unjs/ofetchオプションとAsyncDataOptionsを拡張。すべてのオプションは静的値、ref、またはcomputed値にできる。

getCachedDataのデフォルト:

const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating 
 ? nuxtApp.payload.data[key] 
 : nuxtApp.static.data[key]

これはnuxt.configでexperimental.payloadExtractionが有効な場合にのみデータをキャッシュします。

戻り値

ステータス値

• idle: リクエストが開始されていない（例: { immediate: false }またはサーバーレンダリングで{ server: false }）
• pending: リクエストが進行中
• success: リクエストが正常に完了
• error: リクエストが失敗

例