학교생활/23-1 '모여서 각자 코딩'

[모각코 23-1] 7회차- 프로미스 객체

the0 2023. 5. 15. 10:18
728x90

콜백 안에 콜백 안에 콜백 안에 콜백 …. =>  콜백 지옥
콜백을 사용했을 때의 복잡함을 피하기 위해, ES6부터 “프로미스(promise)” 등장

 

처리에 성공했을 때 실행할 함수와 성공하지 못했을 때 실행할 함수를 미리 약속하자는 것이다.

프로미스는 객체를 생성하는 부분과 소비하는 부분으로 나뉜다.

 

먼저, 프로미스를 사용하려면 Promise 객체를 먼저 만들어야 한다. 생성!
성공했을 때 실행할 함수 resolve()와 실패했을 때 실행할 함수 reject()도 함께 지정해야 한다.

 

let likePizza = true;
const pizza = new Promise((resolve, reject) => {
   if (likePizza) 
      resolve('피자를 주문합니다.');
   else
      reject('피자를 주문하지 않습니다.');
});

 

프로미스 제작 코드에서 ‘성공＇과 ‘실패’를 확인한 후 소비 코드로 알려준다. 

소비코드는 다음 세 함수를 사용하게 된다.

  • then() – 프로미스에서 성공했다는 결과를 보냈을 때 실행할 소스
  • catch() – 프로미스에서 실패했다는 결과를 보냈을 때 실행할 소스
  • finally() – 프로미스의 성공과 실패에 상관없이 실행할 소스 
pizza
  .then (
     result => console.log(result)
  )
  .catch (
    err => console.log(err)
  )
  .finally (
    () => console.log(“완료”)
  );

 

첫번째 코드블럭의 likePizza 가 true 이면.. 

피자를 주문합니다.

완료

 

false 이면..

피자를 주문하지 않습니다.

완료

 

가 출력된다.

 

프로미스의 상태
  • pedding : 처음 프로미스를 생성하면 이 상태가 된다.
  • fulfilled : resolve() 를 수행하면 이 상태가 된다.
  • rejected: reject() 를 수행하면 이 상태가 된다.

제작코드에서는  fulfilled 상태인지, reject 상태인지에 따라 ‘피자를 주문합니다.’ 또는 ‘피자를 주문하지 않습니다.’라는 결괏값을 넘겨준다. 
소비코드에서는 결괏값을 result나 err 같은 변수 이름으로 받아서 사용한다. 

 

맨 처음에 콜백지옥을 벗어난 프로미스라고 했는데,

어떻게 콜백 지옥을 벗어나냐...

프로미스 체이닝

A.then(B).then(C)

then() 함수는 이전 프로미스의 결괏값을 받아서 다른 함수로 연결한다.

const pizza = () => {
 return new Promise((resolve, reject) => {
   resolve("피자를 주문합니다.");
 });
};

const step1 = (message) => {
  console.log(message);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('피자 도우 준비');
    }, 3000);
  });
};

const step2 = (message) => {
  console.log(message);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('토핑 완료');
    }, 1000);
  });
};

const step3 = (message) => {
  console.log(message);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('굽기 완료');
    }, 2000);
  });
};

피자를 만드는데에 이러한 순서의 코드가 필요하다고 해보자.

대충.. 피자 주문하기 -> 도우 준비(step1) -> 토핑 완료(step2) -> 굽기 완료(step3) 의 순서로 진행되어야 한다.

 

pizza()
  .then((result) => step1(result))
  .then((result) => step2(result))
  .then((result) => step3(result))
  .then((result) => console.log(result)) 
  .then(() => {
    console.log('피자가 준비되었습니다.');
  });

 

여기서 더 줄일 수 있다!

pizza()
 .then(step1)
 .then(step2)
 .then(step3)
 .then(console.log)
 .then(() => {
   console.log("피자가 준비되었습니다.");
 });
728x90