[JavaScript] Async / Await 정리

Async / Await를 사용하면 Promise chaining을 하는 것 보다 가독성 좋게 만들 수 있다.

• Async 는 함수 앞에 붙는 키워드이고
• Await 는 Promise 객체 앞에 붙는 키워드이다.
  • ( Await 키워드는 Async 함수 안에서만 사용할 수 있다.)

사용 예시

function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('data~');
        }, 1500)
    });
}

• 위 처럼 promise를 리턴하는 getData라는 함수가 있을 때
• 아래처럼 then을 이용하여 결과를 받아올 수 있다.

// Promise chaining version.
getData()
    .then((res) => console.log(res))

• 그럼 이제 Async / Await 를 이용하여 위 then 메소드를 사용한 방식과 같은 동작을 만들어보겠다.

// Async Await version.

async function printData() {
    const data = await getData();
    console.log(data);
}

printData();

• 위 코드는 Promise chaining 방식 코드와 동일하게 작동한다.

• reject() 의 경우 아래와 같이 async 함수 내에서 try catch 구문으로 처리한다.

async function printData() {
    try {
        const data = await getData();
        console.log(data);
    } catch(err) {
        console.log(err);
    }
}

printData();

문제

그럼 Promise 파트에서 했던 세 개의 Task 를 연속적으로 처리하는 것을 구현해보자.

각 Task 프로미스는 아래와 같이 정의했다.

const task1 = () => {
    console.log('Task 1 is started.')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Task 1 is done.');
            resolve(1);
        }, 2000);
    })
};

const task2 = () => {
    console.log('Task 2 is started.')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // reject('오류메시지');
            console.log('Task 2 is done.');
            resolve(2);
        }, 500);
    })
};

const task3 = () => {
    console.log('Task 3 is started.')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Task 3 is done.');
            resolve(3);
        }, 1000);
    })
};

Promise chaining 버전

우선 Promise chaining로 구현한 코드는 아래와 같다.

/* Promise chaining version. */

task1()
    .then(() => task2())
    .then(() => task3())
    .then(() => console.log('Completed!'))
    .catch(console.log)
    .finally(() => console.log('Done.'));

Async Await 버전

/* Async Await version */

async function doTasks() {
    try {
        const data1 = await task1();
        const data2 = await task2();
        const data3 = await task3();
        console.log(data1, data2, data3);
    } catch(err) {
        console.log(err);
    }
    console.log('Done.');
}

doTasks();

• 결과

  

위에서 비교할 수 있듯이 Promise Chaining을 하는 것 보다 Async Await를 쓰는게 더 가독성이 좋다.

Promise.all

Async 함수 내에서도 여러 프로미스들을 병렬적으로 실행시키기 위해

Promise.all 메소드를 사용할 수 있다.

async function doTasks() {
    try {
        const data = await Promise.all([task1(), task2(), task3()]);
        console.log(...data);
    } catch(err) {
        console.log(err);
    }
    console.log('Done.');
}

doTasks();

• 결과