자바스크립트 비동기처리 - async/await

저번 시간에 Promise에 대해 알아본 것에 이어 이번에는 async/await에 대해 알아보겠다. async는 함수 앞에 작성하는데, 이렇게 작성해주면 해당 함수는 값을 반환할 때 Promise로 감싸서 반환하게 된다. 그리고 await는 이 값이 성공 혹은 실패가 될 때까지 기다려준다. await 뒤에는 Promise가 오는데, 그 Promise가 해결될 때까지 기다린다는 뜻을 가진다.

예를 들어 이런 코드가 있다고 해보자.

function fetchFruits(){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            const fruits = ['🍏','🍊','🍌'];
            resolve(fruits);
        }, 100)
    })
}

이렇게 Promise를 반환하는 함수에서 성공과 실패 값을 소비하는 코드를 then()과 catch()로 쓰면 아래와 같이 쓸 수 있다:

fetchFruits().then(function(f){
    console.log(f)
    })
.catch(function(err){
    console.log(err)
})

먼저 fetchFruits 함수가 모두 실행되기를 기다리고,

function(f){
    console.log(f)
    }

그 다음에 then 내부의 함수를 실행시키라는 뜻이다. 그런데 이걸 async/await으로 써주게 되면 어떻게 되는지 보자. 참고로 async와 await는 예외 처리를 try와 catch 구문으로 한다. then과 catch 대신에 말이다.

async function printItems(){
    try{
        const fruits = await fetchFruits();
        console.log(fruits)
    } catch(err) {
        console.log(err)
    }
}
printItems(); 

먼저 printItems함수가 실행이 된다. 그런데 여기서 await 다음에 fetchFruits()가 있으므로 위에 있는 fetchFruits 함수로 돌아가 이 함수가 완료될 때까지 printItems 함수는 기다린다. fetchFruits 함수에서는 프로미스로 값이 resolve 되거나 reject되는데 이 코드에서 resolve 되는 값은 ['🍏','🍊','🍌']이다. 따라서 이 값이 const fruits = await fetchFruits(); 코드의 fruits 변수에 할당되고, 마지막으로 이 값이 콘솔에 출력된다.