[JavaScript] Promise와 Async-Await

Promise와 Async/Await: 비동기 프로그래밍의 핵심

JavaScript는 싱글 스레드 기반 언어로, 비동기 작업을 처리할 때 Promise와 Async/Await를 사용한다. 이 두 가지는 비동기 프로그래밍을 효과적으로 다루기 위해 도입된 도구이며, 각각의 장단점과 사용법이 있다.

---

Promise란 무엇인가?

Promise는 비동기 작업의 성공 또는 실패 결과를 나타내는 객체다. 주로 서버 요청, 파일 읽기, 타이머 같은 비동기 작업을 처리할 때 사용한다.

Promise의 상태

1. Pending: 대기 중 상태로, 작업이 완료되지 않은 상태다.
2. Fulfilled: 작업이 성공적으로 완료된 상태다.
3. Rejected: 작업이 실패한 상태다.

Promise의 기본 사용법

const promise = new Promise((resolve, reject) => {
    const success = true; // 작업 성공 여부
    if (success) {
        resolve("작업 성공");
    } else {
        reject("작업 실패");
    }
});

promise
    .then(result => console.log(result)) // 작업 성공
    .catch(error => console.error(error)) // 작업 실패
    .finally(() => console.log("작업 완료")); // 성공, 실패 여부와 관계없이 실행됨

---

Async/Await란 무엇인가?

Async/Await는 Promise를 더 간단하고 직관적으로 사용할 수 있게 해주는 문법이다. Async는 함수를 Promise를 반환하도록 만들고, Await는 Promise가 완료될 때까지 기다린다. 이를 통해 비동기 작업을 동기 코드처럼 작성할 수 있다.

Async/Await의 기본 사용법

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("에러 발생:", error);
    }
}

---

Promise와 Async/Await의 차이점

특성	Promise	Async/Await
가독성	then 체인으로 코드가 길어질 수 있다	동기 코드처럼 간결하고 읽기 쉽다
에러 처리	.catch 메서드로 에러를 처리한다	try-catch 블록으로 에러를 처리한다
비동기 흐름 제어	then 체인을 사용해 제어한다	await로 자연스럽게 제어한다
유연성	병렬 처리에 유리하다	순차적인 작업 처리에 적합하다

---

Promise와 Async/Await의 실제 사용 예시

Promise로 작성한 코드

function fetchData() {
    fetch("https://api.example.com/data")
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error("에러 발생:", error));
}

Async/Await로 작성한 코드

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("에러 발생:", error);
    }
}

---

Promise와 Async/Await 활용 팁

1. Promise.all과 Promise.allSettled
   여러 비동기 작업을 병렬로 처리할 때 사용한다.
2. const fetch1 = fetch("https://api.example.com/data1"); const fetch2 = fetch("https://api.example.com/data2"); Promise.all([fetch1, fetch2]) .then(results => console.log("모든 요청 완료:", results)) .catch(error => console.error("요청 중 에러:", error));
3. Async/Await의 순차 처리
   순차적으로 작업을 처리해야 할 때 유용하다.
4. async function sequentialFetch() { const response1 = await fetch("https://api.example.com/data1"); const data1 = await response1.json(); console.log(data1); const response2 = await fetch("https://api.example.com/data2"); const data2 = await response2.json(); console.log(data2); }

---

Promise와 Async/Await의 장단점

Promise의 장점

• 병렬 작업 처리(예: Promise.all)에 유리하다.
• 다양한 메서드를 통해 유연한 작업 흐름 제어가 가능하다.

Promise의 단점

• then 체인이 길어질수록 코드 가독성이 떨어질 수 있다.
• 에러 처리가 복잡해질 수 있다.

Async/Await의 장점

• 동기 코드처럼 읽히기 때문에 가독성이 높다.
• try-catch를 사용해 에러를 명확하게 처리할 수 있다.

Async/Await의 단점

• 병렬 작업 처리에는 적합하지 않다.
• 예외 처리를 놓치면 디버깅이 어려울 수 있다.

---

결론

Promise와 Async/Await는 각자의 장단점이 있으므로 상황에 맞게 선택해야 한다.

• Promise는 병렬 처리가 많거나, 작업 간 의존성이 적을 때 유리하다.
• Async/Await는 순차적으로 작업을 처리하거나, 코드의 가독성을 높이는 데 적합하다.

비동기 프로그래밍의 핵심은 작업 흐름을 명확히 하고, 에러를 안정적으로 처리하는 것이다. Promise와 Async/Await를 적절히 활용하면 유지보수하기 쉬운 비동기 코드를 작성할 수 있다.