NUXT3 VUE useFetch, useAsyncData 사용 방법

2023. 7. 10. 14:33·프로그래밍 일기/Front-End
반응형

버전 정보

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

This composable provides a convenient wrapper around useAsyncData and $fetch. It automatically generates a key based on URL and fetch options, provides type hints for request url based on server routes, and infers API response type. useFetch is a composabl

nuxt.com

 

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

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

 

useAsyncData · Nuxt Composables

Within your pages, components, and plugins you can use useAsyncData to get access to data that resolves asynchronously. useAsyncData is a composable meant to be called directly in a setup function, plugin, or route middleware. It returns reactive composabl

nuxt.com

반응형
저작자표시 (새창열림)

'프로그래밍 일기 > Front-End' 카테고리의 다른 글

[Nuxt3] BootStrap 부트스트랩 css, js 적용  (0) 2023.07.30
Nuxt3 vue3 formData 다중 파일 업로드, 파라미터 전달  (0) 2023.07.12
인텔리제이 IntelliJ Nuxt.js 생성 (Nuxt3)  (0) 2023.07.06
인텔리제이 IntelliJ Nuxt.js 생성 (nuxt2)  (0) 2023.07.04
구글 QR API 생성 방법 QR코드 만들기  (0) 2022.07.10
'프로그래밍 일기/Front-End' 카테고리의 다른 글
  • [Nuxt3] BootStrap 부트스트랩 css, js 적용
  • Nuxt3 vue3 formData 다중 파일 업로드, 파라미터 전달
  • 인텔리제이 IntelliJ Nuxt.js 생성 (Nuxt3)
  • 인텔리제이 IntelliJ Nuxt.js 생성 (nuxt2)
MakeMe
MakeMe
제가 포스팅한 글 중 잘못된 부분이 있으면 알려주세요!
  • MakeMe
    Developer blog
    MakeMe
    • 모든 글 (71)
      • 프로그래밍 일기 (57)
        • Java & Spring (21)
        • Python & Flask (3)
        • Linux (12)
        • Front-End (10)
        • DB & SQL (6)
        • Git (3)
        • IDE (2)
      • 자격증 (7)
        • 정보처리기능사 (2)
        • SQLD (1)
        • SW개발_L5 (1)
        • AWS (3)
      • 독립일기 (7)
        • 중소기업청년대출 (7)
  • 인기 글

  • 태그

    고용보험내역서
    nuxt
    건강보험자격득실확인서
    java
    스프링
    AWS
    넉스트
    flask 세팅
    중기청후기
    IntelliJ
    DBeaver
    Vue
    중기청필수서류
    중기청서류
    Spring
    nuxt3
    DB
    자바환경변수
    젠킨스 자동 배포
    스프링부트
    springboot
    자동배포설정
    중소기업청년대출
    인텔리제이
    중기청필요서류
    flask
    MYSQL
    psql
    젠킨스 우분투 설치
    자바
  • hELLO· Designed By정상우.v4.10.1
MakeMe
NUXT3 VUE useFetch, useAsyncData 사용 방법
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.