NUXT3 VUE useFetch, useAsyncData 사용 방법

버전 정보

Nuxt 3.6.2

 

useAsyncData

const {data: testResponse} = await useAsyncData('userDetail', () => $fetch('http://localhost:8080/list/load', {
  query: {
    test1: 'test1',
    test2: 'test2'
  }
}));

일반적으로 GET방식의 통신을 위해 사용된다. 위 통신을 통해 얻은 결과값의 .data가 testResponse라는 변수에 들어가게 된다.

useFetch · Nuxt Composables

 

useFetch

const kakaoLogin = async () => {
  const {response} = await useFetch('http://localhost:8080/kakao/login', {
    method: 'POST',
    body: {
      code: route.query.code
    }
  });
}

일반적으로 POST방식의 통신을 위해 사용된다.

useAsyncData · Nuxt Composables