[Nuxt] useFetch options

<script lang="ts" setup>
const { data, execute } = await useFetch('https://dummyjson.com/users/1',
  {
    server: false,
    immediate: false,
    default: () => {
      return {
        firstName: 'John',
        lastName: 'Doe'
      }
    }
  }
);

</script>
<template>
  <div>
    <h1>UseFetch Brief</h1>
    <button type="button" @click="() => execute()">Fetch</button>
    <div>
      <pre>
        {{ data }}
      </pre>
    </div>
  </div>
</template>

 

server: client side 에서 api 를 호출하도록 합니다. (server side 에서 api를 호출하지 않습니다)

default: factory 함수나 기본값을 등록합니다. api 호출의 응답이 오기 전까지 data 가 가지고 있는 값입니다. api 호출이 완료되면 overwrite 됩니다.

immediate: 즉시 호출하지 않고 execute 함수의 호출을 기다립니다.

 

https://nuxt.com/docs/api/composables/use-fetch#params

useFetch · Nuxt Composables

 

그리고 dedupe 옵션이 있습니다.

"defer" 과 "cancel" 값을 설정할수 있습니다.

<script lang="ts" setup>
const { data, execute } = await useFetch('/api/random-user',
  {
    server: false,
    immediate: false,
    dedupe: "defer",
    default: () => {
      return {
        firstName: 'John',
        lastName: 'Doe'
      }
    }
  }
);

</script>
<template>
  <div>
    <h1>UseFetch Brief</h1>
    <button type="button" @click="() => execute()">Fetch</button>
    <div>
      <pre>
        {{ data }}
      </pre>
    </div>
  </div>
</template>

 

위 코드의 api/random-user 는 2초의 딜레이후 api 를 호출하도 구현되어 있습니다.

api 호출후에 execute 버튼을 빠르게 반복적으로 누르는등 동일한 API 의 반복호출에 대한 처리 옵션입니다.

"cancel" 의 경우 이전 API 의 호출이 완료되지 않았다면 캔슬시킨 다음 현재의 API 를 재호출합니다.

"defer" 의 경우 이전 API 의 호출이 완료된 이후에 재호출할수 있습니다. 

lodash 의 throttle 와 bounce 와 유사합니다. 

 

그 밖에 필요한 옵션들은 공식문서를 참고하면 자세하게 확인할 수 있습니다.