promise를 동기적인 모양으로 처리하는 async와 await

promise를 처음 접하면 다소 복잡해서 이해하기 쉽지 않다.

비동기라는 개념이 낯설기 때문이다.

그러나 promise의 raw한 문법 대신 async와 await를 쓰면 일반적인 동기 코드를 쓴 것처럼 표현할 수 있다.

 

async getData() { // await을 쓰려면 async 키워드를 쓴 함수로 감싸줘야 한다.

    const result = await fetch(/* ... */); // promise가 resolve될 때가지 await 했다가 promise가 담고 있는 결과 값을 result에 준다.

    console.log(result);

}

 

동기적인 함수처럼 보이지만 내부적으로는 promise를 쓰는 것과 똑같이 돌아간다.

때문에 await를 쓴다고 쓰레드가 멈춰 있는 게 아니고

요청을 날린 뒤 다른 작업을 하다가 요청을 받았을 때 이후 작업을 처리한다.

 

promise의 catch를 표현하려면 try, catch 문을 쓴다.

 

async getData() {

    try {

        const result = await fetch(/* ... */);

        console.log(result);

    } catch (error) {

        console.log(error);

    }

}