JS의 Promise이해하기

Callback을 이용한 비동기처리

Ex 1

function isPositive(number, resolve , reject ){
  setTimeout( () =>{
    if(typeof number === "number"){
      // 성공
      resolve( number >= 0 ? "양수" : "음수")
    }else{
      // 실패
      reject("주어진 값이 숫자형이 아닙니다.")
    }
  } , 2000);
}

isPositive(
  10,
  (result) => { console.log("성공적으로 수행돰 : ", result)},
  (result) => { console.log("실패 하였음 : ", result)},
)

Ex 2

function taskA(a,b,cb){
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000)
}

function taskB(a,cb){
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000)
}

function taskC(a,cb){
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000)
}

taskA(3,4,(a_res) =>{
  console.log("task A : " , a_res);
  taskB(a_res , (b_res)=> {
    console.log("task B : " , b_res);
    taskC(b_res , (c_res) =>{
      console.log("task C : " , c_res);
    })
  }) 
})

Promise를 사용한 후

function taskA(a,b){

  return new Promise((resolve ,reject) =>{
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 3000);
  });
}

function taskB(a){
  return new Promise((resolve ,reject) =>{
    setTimeout(() => {
      const res = a * 2;
      resolve(res);
    }, 1000);
  })
  
}

function taskC(a){
  return new Promise((resolve , reject) =>{
    setTimeout(() => {
      const res = a * -1;
      resolve(res);
    }, 2000);
  });
}

// Promise를 사용하는 잘못된 예
taskA(5 , 1).then((a_res) => {
  console.log("A Result : " , a_res);
  taskB(a_res).then((b_res) =>{
    console.log("B Result : " , b_res);
    taskC(b_res).then((c_res) =>{
      console.log("C Result : " , c_res);
    })
  })
});

// Promise를 사용하는 바른 예제
taskA(5, 1)
  .then((a_res) => {
    console.log("A Result : ", a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log("B Result : ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("C Result : ", c_res);
  });
  
  // 또는 중간에 다른 작업을 끼워넣고 싶다면?
  const bPromiseResult = taskA(5, 1)
  .then((a_res) => {
    console.log("A Result : ", a_res);
    return taskB(a_res);
  })
  
  // 중간에 추가 작업들.
  
  bPromiseResult.then((b_res) => {
    console.log("B Result : ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("C Result : ", c_res);
  });

Promise를 사용한 비동기 처리

function isPositiveP(number){
  const executor = (resolve , reject) =>{
    setTimeout( () => {
      if(typeof number === "number"){
        // 성공
        console.log(number);
        resolve( number >= 0 ? "양수" : "음수")
      }else{
        // 실패
        reject("주어진 값이 숫자형이 아닙니다.")
      }
    }, 2000)
  }

  const asyncTask = new Promise(executor);
  // executor을 할당하는 순간 바로 실행된다.
  return asyncTask;
}

const res = isPositiveP(101);

res
.then((res) => {console.log("작업 성공 : ", res)})
.catch((err) => {
  console.log("작업 실패 : ", err);