[정리] async-await와 promise의 관계

2021. 1. 6. 22:54프로그래밍-Web/Javascript

트렌디한 문법을 사용하는 것이 좋아보이니까, 그리고 보편적으로 권장되는 일이니까

나도 async-await를 거의 남발하듯 쓴다.

근데 그리 하다 보니 자꾸 Promise를 간과하는 것 같아서 

한번 정리 해보는 목적의 글!

 

우리가 쓰는 모든 async라는 꼭지가 달린 async함수는 promise를 리턴한다

그리고 모든 await 함수는 promise가 된다

 

promise는 객체안에 객체를 가지고 있는 일종의 중첩객체인데

promise라는 객체는 모든 함수에 대해 만들 수 있다.

얘들은 일반적으로 then()을 통해 받을 수 있고, 에러는 catch()를 통해 처리된다.

 

예컨데 getUsers는 콜백함수가 묶여있고, getUsers()는 promise를 리턴하는 함수라고 하자

즉, getUsers()가 처리되면, resolve라는 객체에 처리가 됐다는 신호를 던질 것이다.

 

이를 await로 표현하면 다음과 같다

우리는 promise를 리턴하는 함수는 기다릴(await) 수 있다.

따라서 await는 사실 then()을 통해 리턴되는 promise를 기다리라는 신호가 된다.

다만, 이때 에러처리는 try~catch구문을 통해서만 할 수 있다.

 

 

조금 더 직관적인 예시

이 경우에는 promise라는 함수가 promise를 리턴하는 함수이다.

얘는 1000s라는 시간이 지나면 foo를 resolve라는 성공객체에 담아 던지도록 되어있다.

그렇게 promise를 던지고 나면 then()함수에 있는 콘솔이 찍힌다

즉, promise라는 함수에서 잠시 기다리고(await), 끝나면 then()로직이 작동한다

promise는 promise를 던질 수 있는 비동기 함수이기 때문에 가능한 일.

 

얘는 위랑 동일한 로직인 것이다.

대신 promise 함수를 쓰고싶은 상위 함수를 async로 만들어준다

위의 예시의 value와 result는 같다. 

얘는 promise함수가 promise를 리턴할떄까지 기다렸다가(await), 그것이 끝나고 resolve('foo')를 리턴하면 콘솔을 찍는 것이다.