Promise 패턴과 비동기 제어 (with Async - Await)

이미지 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

프로미스(Promise) 란?

프로미스는 비동기 함수의 처리 결과, 그 자체 를 나타내는 자바스크립트의 내장객체이다.

비동기 메서드의 동기 매서드처럼 처럼 반환 하여 사용 할 수있다.

비동기 작업이 완료되었을때 호출하는 .then 이라는 API를 사용하여 콜백함수들을 체이닝하여 순차적으로 다룰 수 있다.

 

프로미스의 상태

pending : 처리가 완료되지 않은 상태 

fulfill : 처리가 완료되어 프로미스가 결과값을 반환한 상태 .then() 를 통해 처리된 값을 순차적으로 다룰 수 있다.

reject : 처리가 실패하거나 오류가 발생

 

 

콜백과 프로미스 차이

• Callback 패턴 

다른 함수에 콜백 함수의 제어권을 단순히 위임 후에 다른 task를 수행한다.

수행 소요 시간이 얼마나 걸릴 지 모르는 네트워크 요청(이메일 보내기, DB조회) 등에 활용하기는 좋으나,

순서 제어가 어려워 비동기 지옥에 빠질 수 있다.

 

Promise 패턴

.then() 과 catch()를 통해 체이닝하여 비동기 로직 다음 수행할 일들을 제어 할 수 있다.

비동기적인 로직을 동기적으로 보이게 처리 할 수 있다.

또한 *Promise 는 비동기 로직을 값(일급)으로 다룰 수 있으며, 때문에 비동기 상황의 대기, 성공, 실패 또한 값으로 처리할 수 있다.

 

*일급 함수 : 

프로그래밍 언어에서 함수를 값 혹은 객체로 다룰 수 있는 것

즉, 함수를 변수에 담아 원할 때 평가(함수 호출)할 수있다. 함수의 return 값이 함수가 될수도, 변수가 될 수 도 있다.

 

 

Async - Await 

Async - await 는 es7에 나온 비동기 처리 패턴

먼저 함수 앞에 async를 붙이고  비동기 처리 매서드 앞에는 await 를 붙이면 비동기 로직 수행(ex ,프로미스 객체이가 반환되는 시점) 이후로 순차적인 로직 수행이 가능하다.

 

응답받은 값을 같은 스코프 내에서 처리가 가능해져서 코드가 간결해지고, 계단식 콜백지옥이나 체이닝 패턴이 쌓이는것을 막을 수있다.