Javascript/GMA(2302~)

23.04.27 자바스크립트 비동기 처리방식 -프로미스 객체

hyerin1201 2023. 4. 27. 22:25


프로미스객체 : 무분별한 콜백함수 사용에 부작용을 최소화하기 위해 *내장객체이다
promise( ) => 매개변수 : 조건값이 true 일때 실행할 함수와, 조건값이 false일때 실행할 함수를 가지고 있음.

 


프로미스 객체의 진행 단계 (3가지)
1.pendding : 프로미스 객체를 만들고 대기중인 상태
2.fullfilled : 프로미스 객체를 활용해서 트루값에 도착한 상태
3.rejected : 프로미스 객체를 활용해서 false값에 도착한 상태

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

   pizza
      .then(
         (result) => console.log(result)
      )
      .catch(
         (err) => console.log(err)
      ).finally(
         ( ) => console.log("완료")
      );
 

 

HTML

<body>
  <div id="container">
    <div id="start"></div>
    <div id="end"></div>
  </div>
</body>

 

CSS

 #container {
      width: 300px;
      margin: 20px auto;
      
    }
    .active {
      background-color: #222;
      color: #fff;
      padding: 10px 20px;
    }
    .done {
      text-decoration: line-through;
      color: #999;
      font-size: 0.9em;
      font-style: italic;
    }

 

Javascript

let coffee = prompt("어떤 커피를 주문하시겠습니까?", "아메리카노");
const order = new Promise((resolve, reject) => {
  if(coffee != null && coffee !=""){
    document.querySelector("#start").innerText = `${coffee} 주문접수`;
    setTimeout(() => {
      resolve(coffee);
    }, 3000)
  } else {
    reject("커피를 주문하지 않았습니다.")
  }
});

function display(coffee) {
  document.querySelector("#end").innerText = `${coffee} 준비완료 ☕`;
  document.querySelector("#end").classList.add("active");
  document.querySelector("#start").classList.add("done");
}

function showErr(err) {
  document.querySelector("#start").innerText = err;
}

order
  .then(display)
  .catch(showErr);