[JS] Promise

Fleuve·2020년 11월 14일
1
post-thumbnail

Promise

자바스크립트와 노드는 주로 비동기 프로그래밍을 합니다. 특히 이벤트 주도 방식 때문에 콜백 함수를 자주 사용하는데 이때 콜백 함수 안에 콜백 함수를 그 콜백 함수에 콜백 함수를 사용하게 되면 악명 높은 콜백 헬 이 만들어집니다.

이러한 콜백 헬을 극복하기 위해 ES2015부터 Promise가 생기게 되었습니다.

Promise의 규칙

const condition = true;
const promise = new Promise((resolve, reject) => {
  if(condition) {
   resolve('성공');
  } else {
    reject('실패');
  }
});

promise
  .then(message => console.log(message))// resolve가 호출되면 실행
  .catch(error => console.error(error));// reject가 호출되면 실행
  • new Promise로 프로미스 객체를 생성합니다.
  • resolve와 reject를 매개변수로 갖는 콜백 함수를 넣습니다.
  • 이렇게 만든 Promise 객체에 then과 catch 메서드를 사용할 수 있습니다.
  • 프로미스 내부에서 resolve가 호출되면 then이 실행, reject가 호출되면 catch를 실행합니다.
  • then이나 catch에 다시 then과 catch를 붙일 수 있습니다. 이전 then의 return 값을 다음 then의 매개변수로 넘깁니다.

Promise에서 자주 사용하는 메서드

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');

Promise.all([promise1, promise2])
  .then(result => console.log(result)) // ['성공1', '성공2']
  .catch(error => console.error(error)); // promise1이나 promise2 중 하나라도 reject가 되면 실행
  • Promise.resolve : 즉시 resolve 하는 프로미스를 만드는 메서드
  • Promise.reject : 즉시 reject 하는 프로미스를 만드는 메서드
  • Promise.all : 여러 개의 프로미스가 있을 때 Promise.all에 넣으면 모두 resolve 될 때까지 기다렸다가 then에 배열로 넘어갑니다. 하지만 Promise 중 하나라도 reject가 되면 catch로 넘어가게 됩니다.

Promise의 3가지 상태

  • pending : 대기상태(비동기 처리 로직이 아직 완료되지 않은 상태)
  • fullfiled : 성공상태(비동기 처리가 완료되어 프로미스가 결괏값을 반환한 상태)
  • rejected : 실패상태(비동기 처리가 실패하거나 오류가 발생한 상태)

0개의 댓글