minstudio

Async & Await (비동기의 마스터피스)

Promise의 .then().catch() 체인조차도 코드가 길어지면 가독성이 떨어집니다. ES8(2017)에 등장한 async/await는 복잡한 비동기 코드를 마치 평범한 동기 코드처럼 위에서 아래로 직관적으로 읽히게 만들어 줍니다. 현대 실무의 절대적인 표준입니다.

멈춤 팻말과 우아한 대기 (Async/Await)

코드 1
커피 주문하기 (서버 요청)
await
커피 나올 때까지 여기서 정지!
코드 2
커피 마시기 (데이터 사용) 
// Promise를 반환하는 가상의 서버 데이터 통신 함수
function fetchUserData() {
    return new Promise(resolve => setTimeout(() => resolve({name: "Minstudio"}), 1500));
}

// 1. 함수 앞에 async를 붙이면 비동기 함수가 됩니다.
async function displayUser() {
    try {
        console.log("데이터 가져오는 중...");
        
        // 2. await 키워드를 쓰면 해당 Promise가 완료될 때까지 여기서 "기다려" 줍니다!
        // 코드는 멈춘 것처럼 보이지만 브라우저 화면은 얼어붙지 않습니다! (마법)
        const user = await fetchUserData(); 
        
        console.log(`가져온 유저 이름: ${user.name}`);
    } catch (error) {
        // 에러는 try-catch 문으로 아주 우아하게 잡을 수 있습니다.
        console.log("데이터 로드 실패:", error);
    }
}

displayUser();
실행 결과
Async & Await (비동기의 마스터피스) | Minstudio