[javascript]Promise & 콜백지옥

콜백지옥

:연속된 비동기함수를 처리할때 콜백이 계속 깊어지는 현상 

Promise 

비동기의 콜백 지옥을 해결해주는 방법

 

Pending(대기상태)

(resolve)-->1. Fulfilled(성공)

(reject)--> 2.Rejected(실패)

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

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

#성공

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

isPositive(
  [],
  (res)=>{
  console.log("성공적으로 수행함:",res);
  },
  (err)=>{
  console.log("실패하였음:",err)
  }
);

#실패 

 

 

Promise

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

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);
  return asyncTask;
}

const res= isPositiveP(101);

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

 

Promise 사용 X

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("taskA:",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);
  });
}

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);
});

==> 콜백지옥을 사라지게 함. 더 객관적이고 쉽게 할 수 있게 함 .