async/await 알아보기

동기와 비동기

동기

어떤 작업이 실행될 때 그 작업이 완료되기 전까지 다음 코드가 실행되지 않는다. 따라서 작업의 순서를 보장되며 작업이 끝날 때까지 결과를 기다릴 수 있다.

비동기

어떤 작업이 실행될 때 그 작업이 완료되지 않더라도 다음 코드를 실행한다. 작업이 오래 걸리는 경우 시간을 절약하고 병렬로 작업 처리가 가능하다.

Promise

Promise는 자바스크립트에서 비동기에 사용되는 객체로 내용은 실행이 되었지만 결과를 아직 반환하지 않은 객체이다.

Promise는 아래 3가지 상태를 가진다.

• Pending(대기)
• Fulfilled(이행)
• Rejected(실패)

아래 3가지 상태가 존재하며 실행되지 않았다면 Pending(대기), 완료가 되었다면 Fulfilled(이행), 실패 또는 오류가 발생했다면 Rejected(실패) 상태를 가진다.

function waitForTwoSeconds() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const errorOccurred = false;
            if (!errorOccurred) {
                resolve('Two seconds have passed');
            } else {
                reject(new Error('An error occurred'));
            }
        }, 2000);
    });
}

waitForTwoSeconds()
    .then(message => {
        console.log(message);
    })
    .catch(error => {
        console.error('Error:', error.message);
    });

async/await

ES8에 도입된 기능으로 Callback과 Promise를 사용하는 것보다 가독성이 향상되고 유지 관리가 쉬워진다. 그리고 콜백 지옥과 then 지옥이라고 불리는 단점을 없애준다.

async는 함수 앞에 붙여 비동기 함수임을 나타내주며 비동기 함수 안에서 await 키워드를 사용해 비동기 작업을 기다려 해당 결과를 반환 받은 다음에 다음 코드가 실행된다.

function waitForTwoSeconds() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const errorOccurred = false;
            if (!errorOccurred) {
                resolve('Two seconds have passed');
            } else {
                reject(new Error('An error occurred'));
            }
        }, 2000);
    });
}

async function waitAndLog() {
    try {
        const message = await waitForTwoSeconds();
        console.log(message);
    } catch (error) {
        console.error('Error:', error.message);
    }
}

waitAndLog();