자바스크립트 중급 16 - 프로미스(Promise)

const pr = new Promise((resolve, reject) => {           
(resolve: 성공했을 때 실행되는 함수, reject: 실패했을 때 실행되는 함수)
  //code    
});

→ 어떤 일이 완료된 이후 실행되는 함수: callback 함수

 

<new Promise>                                                      

state: pending(대기)                      

result: undefined                                                             

          ↓

resolve(value)                   ☞                    state: fulfilled(이행됨)

                                                                   result: value (resolve로 전달받은 값)

 

reject(error)                  ☞                    state: rejected(거부됨)

                                                              result: error

 

ex)

const pr = new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve('OK')
  }, 3000)
});

 state: pending(대기)                    ☞                  state: fulfilled(이행됨)

 result: undefined                        (3s)                 result: 'OK'

 

 

const pr = new Promise((resolve, reject) => {
  setTimeout(()=>{
    reject(new Error('error..'))
  }, 3000)
});

 state: pending(대기)                    ☞                  state: rejected(거부됨)

 result: undefined                        (3s)                 result: error

 

→판매자의 코드: 주문을 받으면 3초 후에 성공인지 실패인지 알려줌.

 

소비자의 코드(then):

pr.then(       
    function(result){},    //이행되었을 때 실행, result = 'OK'
    function(err){}     //거부되었을 때 실행, err = 에러값
)

const pr = new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve('OK')
  }, 3000)
});

pr.then(
    function(result){
      console.log(result + '가지러 가자.');     //"OK가지러 가자."
    },
    function(err){
      console.log('다시 주문해주세요..');
    }
);

거부되었을 때 = catch함수로 대체 가능

pr.then(                                                    pr.then(

     function(result){},              →                   function(result){}

     function(err){}                                     ).catch(

);                                                                    function(err){}

                                                                )

 

finally = 이행되었든, 거부되었든 실행 

pr.then(
    function(result){}
).catch(
    function(err){}
).finally(
    function(){
      console.log('--- 주문 끝 ---')
    }
)

 

const pr = new Promise((resolve, reject)=> {
  setTimeout(()=> {
    resolve("OK");
  }, 1000);
});

console.log("시작");
pr.then((result) => {
  console.log(result);
})
  .catch((err) => {
  console.log(err);
})
  .finally(() => {
  console.log("끝");
});

 

*Callback Hell

const f1 = (callback) => {
  setTimeout(function () {
    console.log("1번 주문 완료");
    callback();
  }, 1000);
};

const f2 = (callback) => {
  setTimeout(function () {
    console.log("2번 주문 완료");
    callback();
  }, 3000);
};

const f3 = (callback) => {
  setTimeout(function () {
    console.log("3번 주문 완료");
    callback();
  }, 2000);
};

console.log('시작')
f1(function(){
  f2(function(){
    f3(function(){
      console.log("끝");
    });
  });
});

 

*Promise Chain

const f1 = () => {
  return new Promise((res, rej)=> {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej)=> {
    setTimeout(() => {
      res("2번 주문 완료");
    }, 3000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej)=> {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 2000);
  });
};

console.log('시작');
f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => console.log(res))
.catch(console.log)
.finally(() => {
  console.log("끝");
});

 

const f1 = () => {
  return new Promise((res, rej)=> {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej)=> {
    setTimeout(() => {
      rej("xxx");
    }, 3000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej)=> {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 2000);
  });
};

//Promise.all
console.time("x")
Promise.all([f1(), f2(), f3()]).then((res) => {
  console.log(res);
  console.timeEnd("x");
});


//Promise.race : 하나라도 완료되면 종료
console.time("x")
Promise.race([f1(), f2(), f3()]).then((res) => {
  console.log(res);
  console.timeEnd("x");
});


console.log("시작");
f1()
  .then((res) => f2(res))
  .then((res) => f3(res))
  .then((res) => console.log(res))
  .catch(console.log)
  .finally(() => {
    console.log("시작");
});