자바스크립트 비동기 이해하기 - (4.2) Async & Await 좀 더 알아보기

2025.04.18 - [FE develop/Javascript] - 자바스크립트 비동기 이해하기 - (4.1) Async & Await 알아보기

자바스크립트 비동기 이해하기 - (4.1) Async & Await 알아보기

 

앞선 글에서는 async와 await의 기본적인 개념을 소개해드렸습니다. 이번 글에서는 이 문법을 조금 더 실용적인 예제들과 함께 알아보고, 에러 처리 방식과 Fetch API와의 활용 예도 함께 다뤄보겠습니다.

 

✅ async/await의 순차 실행

 

async 함수 안에서는 await을 사용하여 비동기 작업을 동기적인 코드처럼 작성할 수 있습니다. 예제를 보시죠

function networkRequest() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, 2000);
    });
}

async function getUser() {
    await networkRequest();
    return "홍길동";
}

async function getTodo() {
    await networkRequest();
    return ["청소하기", "밥먹기"];
}

async function getData() {
    const name = await getUser();
    const todos = await getTodo();
    return [name, todos];
}

const data = getData();
data.then((d) => console.log(d));

 

출력 결과

[ '홍길동', [ '청소하기', '밥먹기' ] ]

 

위 예제에서 getUser()와 getTodo()는 각각 2초의 시간이 걸리는 비동기 함수입니다. 하지만 await 키워드를 통해, 마치 동기 코드처럼 위에서 아래로 자연스럽게 작성할 수 있습니다. 이 덕분에 비동기 작업의 흐름을 더 명확하게 파악할 수 있습니다.

 

✅ async 함수에서의 에러 처리

비동기 함수에서도 에러 처리는 매우 중요합니다. async/await 문법에서는 try...catch 구문을 사용하여 에러를 다룰 수 있습니다.

 

async function getUser() {
    // 일부러 에러 발생
    throw new Error("에러가 발생했어요!");
    await networkRequest();
    return "홍길동";
}

async function getTodo() {
    await networkRequest();
    return ["청소하기", "밥먹기"];
}

async function getData() {
    let user;

    try {
        user = await getUser();
    } catch (error) {
        console.log(error.message); // 에러 메시지를 출력
        user = "익명"; // 에러 발생 시 기본값 처리
    }

    const todos = await getTodo();
    return [user, todos];
}

const data = getData();
data.then((d) => console.log(d));

 

출력 결과

에러가 발생했어요!
[ '익명', [ '청소하기', '밥먹기' ] ]

 

위처럼 try...catch를 활용하면 특정 함수에서 에러가 발생하더라도, 전체 코드의 흐름을 안전하게 이어갈 수 있습니다. 특히 사용자 정보나 외부 API 호출에서 오류가 잦을 수 있기 때문에, 반드시 예외 처리를 해주는 것이 좋습니다.

 

✅ Fetch API와 async/await의 활용

실제로 많이 쓰이는 패턴 중 하나는 fetch() API와 async/await을 함께 사용하는 것입니다.

async function fetchData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await response.json();
    console.log(data);
}

fetchData();

 

이 코드는 다음과 같은 순서로 작동합니다

1. fetch()를 통해 비동기적으로 데이터를 요청합니다.
2. await 키워드 덕분에 응답이 도착할 때까지 기다립니다.
3. .json() 메서드를 호출해 응답을 JSON으로 변환합니다.
4. 변환된 데이터를 출력합니다.

이전에는 .then()을 여러 번 중첩해서 사용해야 했지만, async/await을 활용하면 코드가 훨씬 깔끔하고 가독성도 높아집니다.

---

✅ 마무리 정리

• async 함수는 항상 Promise를 반환하며, 내부에서 await을 사용해 비동기 흐름을 제어할 수 있습니다.
• await을 사용하면 복잡한 .then() 체인 없이도 비동기 작업을 순차적으로 처리할 수 있습니다.
• try...catch를 통해 async 함수 내부에서 발생하는 에러를 안전하게 처리할 수 있습니다.
• fetch API처럼 Promise 기반 함수들과 함께 사용하면 더욱 강력한 패턴을 구성할 수 있습니다.