프로미스(Promise) 사용법

콜백 안에 콜백 안에 콜백...과 같은 콜백 지옥이 너무 깊어지면 관리가 어려워 진다. 각 콜백을 변수로 빼서 해결하기는 했지만 여전히 가독성이 안 좋기는 마찬가지였다. 이러한 문제를 해결하기 위해 프로미스가 등장했다. 

 

Promise는 대강 이런 꼴을 가진다. 클래스처럼 사용하는 방식이 정해져이씩 때문에 외워두자.

Promise는 생성자 함수이기 때문에 앞에 new를 붙이고 대문자로 시작한다.

resolve는 성공, reject는 실패를 의미한다.

new Promise((resolve, reject) => {});

 

plus란 이름을 가진 프로미스를 만든 후 then과 catch로 사용해보았다.

resolve의 경우 then, reject의 경우 catch가 실행된다.

중요한 점은 처음 .then에 return값이 있다면 resolve로 처리되어 다음 .then가 연달아 실행된다.

const condition = true;

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

plus
  .then(success => console.log("resolve(성공)한 경우 실행."))
  .catch(error => console.log("reject(실패)한 경우 실행"));

 

또한 return 값으로 Promise를 준다면 또 다시 분기가 나뉜다.

다음 코드는 .then 실행 뒤 Promise를 리턴하는데 그 Promise에서 reject가 되어 .catch를 실행하게 된다.

이런 방식으로 진행하기 때문에 콜백 지옥을 겪을 필요 없이 동일한 깊이에서 .then, .catch를 운용하면 된다.

const condition = true;

const plus = new Promise((resolve, reject) => {
  if (condition) {
    resolve("성공"); //첫번째 then의 인자에 "성공" 전달
  } else {
    reject("실패"); //catch의 인자에 "실패" 전달
  }
});

plus
  .then(success => {
    console.log("resolve(성공)한 경우 실행.");
    return new Promise((resolve, reject) => {
      if (!condition) {
        resolve("성공"); //then의 인자에 "성공" 전달
      } else {
        reject("실패"); //catch의 인자에 "실패" 전달
      }
    });
  })
  .then(adf => console.log("성공시 연달아 실행"))
  .catch(error => console.log("reject(실패)한 경우 실행")); //error에는 "실패"가 있다.
  
//실행 결과  
//resolve(성공)한 경우 실행.
//reject(실패)한 경우 실행