실전 코드로 배우는 Vue.js

237

CHAPTER 06

외부 데이터 통합

6.46.4

런타임 중 비동기 데이터 요청 런타임 중 비동기 데이터 요청

자바스크립트 엔진과 마찬가지로

Vue

도 항상 동기식으로 작동한다. 실행 도중 비동기 요청

이 발생해도

Vue

는 요청이 완료될 때까지 기다리지 않고 작업을 계속 진행한다. 그런 다음

컴포넌트 생성 프로세스가 끝나면 비동기 요청 실행 순서에 따라 해결/거부

resolved

/

rejected

결과

를 차례로 처리한다.

잠시 한 걸음 물러서서, 컴포넌트의

onBeforeMounted

,

onMounted

,

onUpdated

훅에 다음

과 같이 콘솔 로그를 추가하고 실행 순서를 살펴보자.

//<script setup>

import { onBeforeMount, onMounted, onUpdated } from "vue";

//...

async function getUser() {

try {

const response = await axios.get<User>(

'https://api.github.com/users/mayashavin'

);

user.value = response.data;

console.log('User', user.value.name) ➊

} catch (err) {

error.value = err;

}

}

onBeforeMount(async ...