Promise와 async/await의 차이점

JavaScript에서 Promise와 async/await는 비동기 처리를 관리하는 방식이다.

두 방식 모두 비동기 작업의 결과를 처리하는 데 사용되지만, 문법과 사용 방식에서 차이가 있다.

 

Promise

• Promise는 비동기 작업이 완료되었을 때 결과를 처리하는 객체이며, Promise는 세 가지 상태를 가질 수 있다.

1. Pending(대기): 비동기 작업이 아직 완료되지 않은 상태
2. Fulfilled(이행): 비동기 작업이 성공적으로 완료된 상태
3. Rejected(거부): 비동기 작업이 실패한 상태

• Promise를 사용할 때는 주로 .then(), .catch(), .finally() 메서드를 사용하여 비동기 작업이 완료되었을 때의 처리 로직을 작성한다.

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Success!");
    }, 1000);
});

myPromise
    .then(result => {
        console.log(result); // "Success!" 출력
    })
    .catch(error => {
        console.error(error);
    });

 

async/await

• async/await는 Promise를 더 간결하고 읽기 쉽게 사용하기 위한 문법이며, async/await를 사용하면 비동기 코드를 마치 동기 코드처럼 작성할 수 있다.
• async 키워드를 함수 앞에 붙이면 그 함수는 항상 Promise를 반환하며, 함수 내에서 await 키워드를 사용하여 Promise가 해결될 때까지 기다릴 수 있다.

const myAsyncFunction = async () => {
    try {
        const result = await myPromise;
        console.log(result); // "Success!" 출력
    } catch (error) {
        console.error(error);
    }
};

myAsyncFunction();

 

주요 차이점

1. 문법의 간결성:
   • Promise는 .then(), .catch() 메서드 체인을 사용하여 비동기 작업의 결과를 처리하는데, 이는 중첩되거나 여러 비동기 작업이 있을 때 코드가 복잡해질 수 있다.
   • async/await는 비동기 작업을 동기 코드처럼 작성할 수 있어 코드가 더 간결하고 읽기 쉬워진다.
2. 에러 처리:
   • Promise는 .catch() 메서드를 사용하여 에러를 처리한다.
   • async/await는 try...catch 블록을 사용하여 에러를 처리하는데, 이는 동기 코드의 에러 처리 방식과 동일하여 직관적일 수 있다.
3. 제어 흐름:
   • Promise 체이닝은 여러 비동기 작업을 순차적으로 수행할 때 코드의 흐름을 파악하기 어려울 수 있다.
   • async/await는 순차적이고 직관적인 코드 흐름을 제공하여 비동기 작업의 순서를 명확히 파악할 수 있다.

 

코드 예제)

promise

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data received");
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
        return fetchMoreData();
    })
    .then(moreData => {
        console.log(moreData);
    })
    .catch(error => {
        console.error(error);
    });

async/await

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data received");
        }, 1000);
    });
}

async function fetchMoreData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("More data received");
        }, 1000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
        const moreData = await fetchMoreData();
        console.log(moreData);
    } catch (error) {
        console.error(error);
    }
}

getData();

 

이렇게 async/await를 사용하면 비동기 작업의 순차적인 흐름이 더 명확하게 드러나고, 코드의 가독성이 향상된다.