Promise란?

자바스크립트에서 사용되는 Promise는 무엇일까?

콜백

콜백 함수는 다른 함수에 인자로 전달되는 함수로, 어떤 함수의 동작에서 이벤트가 발생하였을 때 혹은 특정 시점에 도달했을 때 호출하는 함수이다. 아래 예시는 정말 러프하게 이해할 수 있게끔만 적어놓은 함수이다. 단순한 구조라면 콜백 구조가 깊지 않지만, 복잡도가 높아짐에 따라 콜백 함수가 중첩되고 그 깊이가 엄청나게 깊어지는 것을 콜백 지옥이라 한다.

function getData(){
  /*
  비동기 함수
  */
}

getData().then(
  // 완료 되었을 때
).then().then().catch().finally()

Promise

Promise 객체는 ES6에서 추가된 개념으로, 비동기 작업이 작업 완료 후 미래의 완료 혹은 실패 결과를 나타낸다. 기존의 방식으로는 작성하게 된다면 콜백 지옥에 빠지게 된다. 또한 Promise 객체는는 비동기 함수들을 병렬로 수행할 수 있도록 하며 .all() 메서드와 .allSettled() 메서드를 프로퍼티로 가진다.

출처: https://adrianalonso.es/desarrollo-web/apis/trabajando-con-promises-pagination-promise-chain/

Promise는 비동기 작업을 수행하고 그 작업의 성공 혹은 실패 함수를 호출할 수 있다.

function getData(){
  /*
  비동기 함수
  */
}

new Promise((resolve, reject) => {
  const result = getData();

  if ( /* 비동기 작업 수행 성공 */) {
    resolve(result);
  } else {
    reject(result);
  }
})

Promise의 상태(State)

Promise 객체의 상태 정보는 세가지가 있다.

• pending: 비동기 처리가 아직 수행되지 않은 상태 - Promise 객체가 생성된 직후 기본 상태
• fulfilled: 비동기 처리가 수행된 상태 (성공) -> resolve 함수 호출
• rejected: 비동기 처리가 수행된 상태 (실패) -> reject 함수 호출

정리

• Promise는 콜백 지옥에 빠지는 비동기 처리를 간결하게 처리할 수 있게 표현
• 상태에는 pending, fulfilled, rejected 가 있다.
• 실행 결과에 따라 실패 시 reject, 성공 시 resolve 함수를 호출할 수 있다.

참고 링크

• Promise