useFetch

이 컴포저블은 useAsyncData 및 $fetch 를 감싼 형태며, URL 및 가져오기 옵션을 기반으로 자동으로 키를 생성하고, 서버 경로를 기반으로 요청 URL의 유형에 대한 힌트를 제공하고, API 응답 유형을 추론한다.

useFetch 는 setup 함수, 플러그인 또는 경로 미들웨어에서 직접 호출되는 컴포저블이다. 반응형 컴포저블을 반환하고 Nuxt 페이로드에 응답을 추가하므로 페이지가 하이드레이션될 때 클라이언트 측에서 데이터를 다시 가져오지 않고도 서버에서 클라이언트로 응답이 전달될 수 있다.

 

사용법

// pages/index.vue

<script setup>
const route = useRoute()

const { data, pending, error, refresh } = await useFetch(`https://api.nuxtjs.dev/mountains/${route.params.slug}`, {
  pick: ['title']
})
</script>

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' }
})

위의 예로 호출되는 URL 은 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
    localStorage.setItem('token', response._data.token)
  },
  onResponseError({ request, response, options }) {
    // Handle the response errors
  }
})

주의) useFetch 는 컴파일러에 의해 변환된 예약된 함수 이름이므로 사용자 함수로 useFetch 를 사용하면 안된다.

 

fetch 사용자 함수 예)

import type { UseFetchOptions } from 'nuxt/app'
import { defu } from 'defu'

export function useCustomFetch<T> (url: string | (() => string), options: UseFetchOptions<T> = {}) {
  const userAuth = useCookie('token')
  const config = useRuntimeConfig()

  const defaults: UseFetchOptions<T> = {
    baseURL: config.baseUrl ?? 'https://api.nuxtjs.dev',
    // this overrides the default key generation, which includes a hash of
    // url, method, headers, etc. - this should be used with care as the key
    // is how Nuxt decides how responses should be deduplicated between
    // client and server
    key: url,

    // set user token if connected
    headers: userAuth.value
      ? { Authorization: `Bearer ${userAuth.value}` }
      : {},

    onResponse (_ctx) {
      // _ctx.response._data = new myBusinessResponse(_ctx.response._data)
    },

    onResponseError (_ctx) {
      // throw new myBusinessError()
    }
  }

  // for nice deep defaults, please use unjs/defu
  const params = defu(options, defaults)

  return useFetch(url, params)
}

참고) Nuxt-개요 > 데이터 가져오기

 

매개변수

• URL: 가져올 URL입니다.
• Options( unjs/ofetch 옵션 및 AsyncDataOptions 확장 ):
  • method : 요청 방법.
  • query : ufo를 사용하여 URL에 쿼리 검색 매개변수를 추가.
  • params : query 파라미터
  • body : 요청 본문 - 자동으로 문자열화된다(객체가 전달되는 경우)
  • headers : 요청 헤더
  • baseURL : 요청의 기본 URL
  • timeout : 설정한 시간이 지나면 요청을 자동으로 중단(밀리초)

모든 가져오기 옵션에는 computed 또는ref 값을 지정할 수 있다. . 이를 감시하고 업데이트된 경우 새 값으로 자동으로 새 요청이 수행됩니다.

 

옵션 ( useAsyncData 에서 유래)

• key : 데이터 가져오기가 요청 전반에 걸쳐 적절하게 중복 제거될 수 있도록 보장하는 고유 키입니다. 키를 제공하지 않으면 useAsyncData 인스턴스의 파일 이름과 행번호로 생성된 고유한 키가 생성된다.
• server : 서버에서 데이터를 가져올지 여부 (기본값은 true)
• lazy : 클라이언트 측 탐색을 차단하는 대신 경로를 로드한 후 비동기 기능을 해결할지 여부(기본값은 false)
• immediate : 로 설정하면 false요청이 즉시 실행되지 않는다. (기본값은 true)
• default : 비동기 함수가 리졸브 되기전에 의 data 기본값을 설정하는 팩토리 함수 - lazy: true 혹은 immediate: false 옵션 과 함께 유용함.
• transform : 리졸브 후 handler 함수 결과를 변경하는 데 사용할 수 있는 함수
• pick : handler 함수 결과에서 이 배열의 지정된 키만 선택한다.
• watch : 자동 새로고침을 위해 반응 소스를 관찰한다.
• deep : 깊은 참조 객체의 데이터를 반환합니다(기본값 true). 얕은 참조 객체에 데이터를 반환 하도록 false 로 설정할 수 있으며, 이는 데이터가 깊게 반응할 필요가 없는 경우 성능을 향상시킬 수 있다.

 

기본적으로 Nuxt는 다시 실행되기 전에 refresh 가 완료될 때까지 기다린다.

서버에서 데이터를 가져오지 않은 경우(예: server: false) 하이드레이션이 완료될 때까지 데이터를 가져오지 않는다. 즉, 클라이언트 측에서 useFetch를 기다리더라도 <script setup> 내에서는 데이터가 null 로 유지된다.

 

Type (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) => DataT
  deep?: boolean
  default?: () => DataT
  transform?: (input: DataT) => 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>
  error: Ref<ErrorT | null>
  status: Ref<AsyncDataRequestStatus>
}

interface AsyncDataExecuteOptions {
  dedupe?: boolean
}

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