[JS] Promise

✏️Promise :콜백지옥을 해결법

비동기 작업이 가질 수 있는 3가지 상태

1. pending: 대기중 : 하고 있거나 안될 때
2. fulfilled: 성공
3. rejected: 실패

한번 성공 실패하면 끝난다.

• resolve: 성공 상태로 가는 것
• reject: 실패 상태로 가는 것

resolve , resolve 상태

function isPositive(number, resolve, reject){
  setTimeout(()=>{
    if(typeof number === 'number'){
      // 성공 -> resolve
      resolve(number >=0? '양수':'음수')
    } else {
      //싱패 -> rejecr
      reject('주어진 값이 숫자형 값이 아닙니다')
    }
  }, 2000)
  
  isPositive(10,(res)=>{
  	console.log("성공적으로 수행됨: ', res)	
  }, (err)=>{
    console.log("실패 하였음: ', err)	
   });
   

Promise를 사용해 비동기

function isPositive(number, resolve, reject){
  setTimeout(()=>{
    if(typeof number === 'number'){
      // 성공 -> resolve
      resolve(number >=0? '양수':'음수')
    } else {
      //싱패 -> rejecr
      reject('주어진 값이 숫자형 값이 아닙니다')
      
    }
  }, 2000)
  
  
function isPositiveP(number){
  //두개의 파라미터를 받는다. 콜백한수 전달받음
 const executor = (resolve, reject) =>{
   setTImeout(()=>{
     if(typeof number === 'number'){
      // 성공 -> resolve
      resolve(number >=0? '양수':'음수')
    } else {
      //싱패 -> rejecr
      reject('주어진 값이 숫자형 값이 아닙니다')
      
    }
   },2000)
 }
 //Promise 객체를 생성, executor 넘겨주면 전달순간 자동으로 executor 함수가 실행
 const asyncTask = new Promise(executor);
  //isPositive프로미스 함수로 나타냄.
  return asyncTask
};
  
  const res = isPositiveP(101)
  
  res.then((res)=>{console.log('작업성공: ", res);
	.catch((err)=> {
    console.log('작업 실패: ", err);
   })                           ``
executor함수는 비동기 작업을 실질적으로 수행하는 함수다.
(지금은 그렇게 생각하기,..)

콜백지옥 탈출하기

function takeA(a,b, cb){
  setTimeout(() => {
    const res = a + b;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 3000)
}

function takeB(a, cb){
  setTimeout(() => {
    const res = a * 2;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 1000)
}

function takeC(a, cb){
  setTimeout(() => {
    const res = a * -1;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 2000)
}
taskA(3,4, (a_res) =>{
  console.log("A RESULT : ", a_res);]
  takeB(a_res,(b_res)=>{
    console.log("B RESULT : ", b_res);
    taskC(b_res,(c_res)=>{
      console.log("C RESULT : ", c_res);
    });
  });
});

function takeA(a,b, cb){
  setTimeout(() => {
    const res = a + b;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 3000)
}

function takeB(a, cb){
  setTimeout(() => {
    const res = a * 2;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 1000)
}

function takeC(a, cb){
  setTimeout(() => {
    const res = a * -1;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 2000)
}

function takeA(a,b){
  return new Primise((resolve, reject) =>{
  setTimeout(() => {
    const res = a + b;//지역상수
    resolve(res);
   }, 3000)
}}

function takeB(a){
   return new Primise((resolve, reject) =>{
  setTimeout(() => {
    const res = a * 2;//지역상수
    resolve(res);
  	console.log("A TASK END");
  }, 1000)
}}

function takeC(a){
  return new Primise((resolve, reject) =>{
  setTimeout(() => {
    const res = a * -1;//지역상수
    resolve(res);
  	console.log("A TASK END");
  }, 2000)
}}
//taskA가 promise객체를 전달받으니 다음에 then...
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);
    });
  });
});

완전 피라미드 사라지게 return으로 만듬.
then채이닝!

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

console.log("dfsdfsdfsgds")

bPromiseResult.then((b_res)=>{
    console.log("B RESULT : ", b_res);
    return taskC(b_res).
}).then((c_res)=>{
      console.log("C RESULT : ", c_res);
    });
  });
});

Promise가 제일 어렵다!!