TIL: Promise와 Async await

Promise와 Async await!

난 주로 Promise를 많이 써왔지만, 이제는 async await 과도 친해질때가 되어따…!

면접을 보아따.. 처참히 망해따..나란 사람….왜사눈거니……..안이럴때도 됐자나..

Promise와 Async await의 차이를 질문받았는데, 얼버무렸다 ㅠㅡㅠ 이번 기회에 확실히 짚고가쟈

동기와 비동기

동기는 지금! 비동기는 나중!

동기란, 요청을 했을 때, 그 때부터 응답이 완료될 때까지 프로그램이 정지되는 것이다. 응답을 받고 나서 그 다음 활동이 진행되는 것이다.

비동기란, 요청이 들어오면, 그 요청에 응답하기 위해 정지하지 않고, 응답을 할 것이라는 약속만 하고 그 다음 할 일로 바로 넘어가는 것이다. 구러면 나중에 응답을 주는 것이다. 요청과 응답이 다른 시간대에 존재한다.

콜백 함수

콜백함수란, 자바스크립트의 비동기를 코드로 표현할 수 있는 일반적인 방법이다. 가장 기본적인 비동기 패턴이다!

콜백함수가 실행이 되면, 요청 작업이 끝나고, 작업의 결과물 또한 콜백함수로 사용가능하다. 그렇게 사용하다보면, 콜백헬에 빠지게 된다.

콜백헬이 심해지면, 가독성이 떨어지고, 헤어나오기가 힘들다는 것을 의미하는데, 이를 해결하기 위해 Promise가 도입되었다.

Promise

Promise는 콜백헬을 해결하려고 나온 것도 있지만,

  1. 비동기처리 함수는 처리된 결과값을 반환할 때, 이 또한 비동기 함수에서 찾아볼 수 밖에 없다. 그래서 이런식으로 사용하다보면 여러가지 어려움이 생기는데, Promise는 구조가 간단하여 가독성이 쉽고, 반환값을 찾기가 쉽다.
  2. 비동기처리를 위한 콜백패턴이 처리순서를 보장하지 않는데에 비해 프로미스는 순서대로 작동하여 조절이 쉽다.
  3. 콜백패턴으로는 에러처리가 어려운 편이다. 콜백함수는 에러가 호출자 방향?으로 전파된다. 하지만 비동기 처리 함수는 콜백 함수를 호출하고 호출스택을(실행 컨텍스트 스택인가..?) 빠져나오기 때문에 호출자가 사라져 에러 처리가 어렵다. 그에 반해 Promise는 resolve, reject 패턴으로 쉽게 에러처리가 가능하다.

즉즉, 요약하면! Promise는

  1. 비동기 함수의 실행 순서 제어
  2. 가독성이 좋다.
  3. 에러처리 및 각종 경우의 처리에 편리하다.

Promise는 만들려면 new Promise로 로직에 넣어 만들 수 있다. 생성된 프로미스 객체는 상태값이 3가지이다.

  • pending (미완료) => resolve나 reject가 호출되기 전
  • fullfilled (처리 완료 후 결과값 반환) => resolve
  • rejected (처리 실패, 오류 발생) => reject

Async Await

Promise가 콜백헬에서 많이 코드를 동기적으로 개선하였지만, 아직 부족함이 존재하였다. 그리고 점점 자바스크립트가 시간이 지날수록 비동기를 많이 쓰고 있기 때문에 async await을 쓰면, promise와 달리 동기되는 코드와 함께 쓸 수 있다는 것이 장점이다. (코드의 흐름이 동기적이 된다!)대신 catch()를 쓸 수 없어 try/catch로 에러핸들링을 해주어야한다.

느낀점….

아니 생각보다 별 이유가 없자나여…..헿….그래도 이제 알아서 다행이다..