javascript async / await

비동기를 제어하기 위한 방법으로 promise에 대하여 배웠다.

es8이후 async와 await이 도입되었는데

이는 후속처리 등으로 인한 프로미스 체이닝의 복잡한 로직을 개선하여

간단하게 표현할 수 있게 되었다.

 

function reo() {
    return new Promise((resolve, reject) => {
        let age = 28;
        resolve(age);
    });
}


async function foo() {
    const x = await reo();
    console.log(x)
}

foo()

// 28

 

함수 선언 시 앞에 async를 붙여 비동기를 제어할 것을 명시해준다.

이제 async함수 안에서 비동기 함수를 실행시킬 때 await를 붙여 줌으로써 비동기의 순서를 제어해준다.

 

const printNum = (num) => {
    return new Promise((resolve, reject) => {
        setTimeout(
            () => {
                console.log(num)
                resolve()
            },
            Math.floor(Math.random() * 100) + 1
        )
    })
}

async function printAll() {
    await printNum(1)
    await printNum(2)
    await printNum(3)
}

printAll()

// 1 2 3

 

위의 예시처럼 랜덤 한 시간을 가지고 실행될 비동기 함수가

await에 의해서 제어를 받아 실행되고 있다.

이는 전의 프로미스 체이닝에 비해 가독성도 좋으며 에러 발생 시 에러 발생지점을 찾는 것 또한 수월해졌다.