Java Script

20240702 TUE Promise 객체를 활용한 비동기 처리

Promise 의 매개변수 => 함수 => 실행 함수라고 부름
 실행 함수 - 비동기 작업을 수행하는 함수형
   resolve : 비동기 작업의 상태를 성공으로 변경하는 함수
    - then() 메소드와 연결. => 즉 then() 메소드를 실행한다는 것과 같은 의미 
   reject : 비동기 작업의 상태를 실패로 변경하는 함수.
    - catch() : 메소드와 연결 => 즉 catch() 메소드를 실행한다는 것과 같은 의미

---

• promise 객체를 활용한 비동기처리

const promise = new Promise(function (resolve, reject) {
   setTimeout(() => {
     resolve("성공");
     //resolve가 호출되면서, promise.then()을 호출하고,
     // "성공"을 매개변수로 전달.
   }, 1000);
});
promise.then((res) => console.log(res));

const promiseReject = new Promise(function (resolve, reject) {
   setTimeout(() => {
     reject("실패");
     /* reject 가 호출되면서,
        promise.catch() 을 호출하면, '실패'를 매개변수로 전달 */
   }, 1000);
 });
 promiseReject.catch((err) => console.log(err));

++ callback Hell (콜백 지옥)

• callback 이 계속 반복되는 상태

function printLetter() {
   console.log("A");
   setTimeout(() => {
     console.log("B");

     setTimeout(() => {
       console.log("C");

       setTimeout(() => {
         console.log("D");

         setTimeout(() => {
           console.log("처리 완료");
         }, 1000);
       }, 1000);
     }, 1000);
   }, 1000);
 }
 printLetter();

---

promise 활용

• promise 를 활용한 주문 프로그램을 비동기 프로그램으로 구현해보기

let orderPizza = false;
 const pizzaOrder = new Promise((resolve, reject) => {
   if (orderPizza) resolve("피자 주문 성공");
   else reject("피자 주문 실패");
 });
 pizzaOrder
   .then((res) => console.log(res))
   .catch((err) => console.log(err))
   .finally(() => console.log("처리 완료"));

• 커피 주문 프로그램 만들기.

Q. 
- promise 사용
- 주문할 커피는 변수로 설정
a. 주문 접수
 - null or 공백 체크,
 - 주문 접수 메시지 출력
 
b. 준비 완료
- 3초가 걸림
- resolve(전용 메소드로 구현)
[
	coffeeOrder.then(전용 메소드로 전달)
    		   .catch(전용 메소드로 전달)
]

c. 커피 주문 취소
- reject (전용 메소드로 구현)

const orderCoffee = new Promise((resolve, reject) => {
  let coffee = "ICE 커피";
  // null, 공백 체크 하기
  if (coffee != null && coffee != "") {
    console.log(`${coffee} 주문 접수`);
    setTimeout(() => {
      // 성공한 경우
      resolve(coffee);
    }, 4000);
  } else {
    reject("커피 주문 취소");
  }
});
// 커피 주문 완료 성공한 경우의 메소드
function orderSuccess(result) {
  console.log(`${result} 준비 완`);
}
// 커피 주문 실패 및 취소 경우의 메소드
function orderCancle(error) {
  console.log(error);
}
// 커피 주문 promise 와 orderSuccess 및 orderCancle 메소드를 서로 연결해주기
orderCoffee.then(orderSuccess).catch(orderCancle);

• 비동기처리를 활용하여 피자를 만드는 과정을 처리해보기

Q.
피자 주문
== 조리 ==
피자 도우 준비 (2초) -step1
피자 토핑 완료 (1초) -step2
피자 굽기 완료 (2초) -step3
== 조리 완료 ==
피자 준비 완료

then() 메소드 체이닝으로 비동기 구현.
디자인 패턴인 '빌더'패턴과 비슷한 형태

pizzaOrder()
  .then( (result) => step1(result) )
  .then( (result) => step2(result) )
  .then( (result) => step3(result) )
  .then() => ( console.log("피자 준비 완료") )

  step1, step2, step3 는 반드시 Promise 객체를 반환해야만  
  then 메소드 체이닝이 가능해짐.

//1. 시작 프로미스를 구현해보자.
const pizza = () => {
  return new Promise((resolve, reject) => {
    resolve("피자 주문 시작");
  });
};

//2. 각 조리 단계별로 메소드 구현 step1 ~  step3의 이름으로 정의
// 각 조리별 메소드는 반드시 promise 객체를 반환해야 함.

// step1 - 피자 도우 준비 2초
const step1 = (msg) => {
  console.log(msg);
  // Promise 객체 생성 및 반환
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("피자 도우 준비");
    }, 2000);
  });
};
// step2 - 피자 토핑 완료 1초
const step2 = (msg) => {
  console.log(msg);
  // Promise 객체 생성 및 반환
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("피자 토핑 완료");
    }, 1000);
  });
};
// step3 - 피자 굽기 완료 2초
const step3 = (msg) => {
  console.log(msg);
  // Promise 객체 생성 및 반환
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("피자 굽기 완료");
    }, 2000);
  });
};
// final - 피자 준비 완료

//3. 시작 promise 와 각 조리 단계별 메소드를 .then() 메소드로 연결해줘야 함.
pizza()
  .then((result) => step1(result))
  .then((result) => step2(result))
  .then((result) => step3(result))
  .then((result) => console.log(result))
  .then(() => {
    console.log("피자 준비 완료");
  });