async와 await

async와 await

Promise는 비동기 코드를 다루는 강력한 추상 개념입니다.

 

이 패턴이 유명세를 떨치면서 결국 JavaScript도 async와 await라는 형태로 이를 지원하기 시작했습니다.

 

따라서 자연스럽게 TypeScript도 지원합니다.

 

이 문법을 이용하면 마치 동기 작업을 다루듯 비동기 작업을 처리할 수 있습니다.

await는 .then에 해당하는 언어 수준 문법으로 생각할 수 있습니다. Promise에 await 하려면 반드시 async 블록 안에 있어야 합니다. 
.catch 대신엔 await를 일반적인 try/catch 블록으로 감싸면 됩니다.

아래와 같이 Promise가 있다고 가정해 보겠습니다.

function getMember() {
    getMemberID(20)
    .then(user => getLoaction(user))
    .then(location => console.info('위치 잡음', location))
    .catch(error => console.error(error))
    .finally(() => console.info('위치 잡는거 끝남'))
}

이 코드를 asyn와 await를 이용하도록 수정하려면, 먼저 함수 앞에 async를 추가한 다음 await로 프로미스의 결과를 기다리면 됩니다.

async function getMember() {
    try{
        let member = await getMemberID(20)
        let location = await getLocation(member)
        console.info('위치 잡음', member)
    } catch(error){
        console.error(error)
    } finally {
        console.info('위치 잡는거 끝남')
    }
}

async와 await는 TypeScript가 완벽히 기능을 지원하며 아주 강력한 타입 안전성을 제공합니다.

 

Promise가 필요한 곳엔 언제든 이들을 이용할 수 있으며, 연결된 여러 동작을 쉽게 이해할 수 있게 해 주고 then을 여러 번 사용할 필요가 없어집니다.