/ JAVASCRIPT

ES8 - async / await

JavaScript 관련 글입니다.




이번 글에서는 ES8에서 추가된 async / await에 대해서 정리해보겠습니다.

async

Promise를 사용하기 어렵게 느껴진다면 async와 await를 사용할 수 있습니다. async와 await은 각각 Promise, then을 조금 더 쉽게 만들어 줍니다.



Promise는 원래 new Promise()로 생성하고 그 안에 함수를 통해 성공과 실패를 판정합니다.
async를 함수 앞에 붙이면 이 함수를 실행할 때, Promise 인스턴스가 그 자리에 남게됩니다.
따라서 뒤에 then()을 붙일 수가 있습니다.

async function sum() {
    return 2 + 2;
}

sum().then((result) => {
    console.log('결과 : ' + result);
})

sum 함수에 async가 붙어있고, 이 sum 함수를 실행한 자리에는 Promise 인스턴스가 남게되어 then()을 사용할 수 있습니다. 위의 예시의 결과는 ‘결과 : 4’가 되겠네요.

await

.then()을 사용할 수 도 있지만 이것도 복잡하다고 느낄 수 있습니다. 다른 방법으로 await 키워드를 사용하는 것입니다.

async function sum(){
    const calculation = new Promise((성공, 실패)=>{
        const result = 1 + 1;
        성공(result);
    });
    const result = await calculation;
    console.log(result);
}

sum();

await은 async 키워드를 사용한 함수 안에서 사용할 수 있으며, await은 프로미스.then() 대신에 쓸 수 있는 대체품 느낌입니다.
await은 Promise를 기다린 다음에 완료 후, 그 결과를 변수에 담습니다. 위의 예시에서 calculation이라는 프로미스가 끝날 때 까지 기다린 후, 그 결과값인 2를 result라는 변수에 담게됩니다. 결과적으로 2가 출력되겠네요.



await은 Promise를 기다리는 데, Promise가 실패할 경우에는 에러가 발생하고, 코드를 멈추는 특징이 있습니다. 그래서 Promise가 실패하더라도, 코드가 멈추지 않고 계속 이어가려면 try-catch문을 사용하여 예외처리를 해주어야합니다.

async function sum() {
    const calculation = new Promise((resolve, reject) => {
        reject();
    })

    try { const result = await calculation; }
    catch {
        // 이곳에 calculation 프로미스가 실패했을 경우에 실행할 코드를 작성하기.
    }
}

정리하자면 async/ await은 Promise와 then을 조금 더 쉽게 만들어줄 수 있습니다. 물론 무조건 async / await이 더 간결하고 사용하기 쉽다라는 것은 아니며, 상황에 따라서 사용하는 것이 좋을 것 같습니다.



End.