Js-Promise

비동기 작업이 가질 수 있는 3가지 상태
-Fulfilled(성공): resolve(해결)된 상태
-Pending(대기 상태)
-Rejected(실패): reject(거부)된 상태

먼저 콜백함수를 이용하여 코드를 작성해보았다.

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

isPositive(
  10,
(res) => {
  console.log(res);
},
(err) => {
  console.log(err);
  }
);

isPositive 함수는 콜백을 이용한 조건문 함수이다. 첫번째 인자로 가지는 number의 타입이 숫자형이라면 양수 또는 음수를 출력하는 콜백함수를 시행한다. 한편 숫자형이 아니라면 메세지를 출력하는 콜백함수를 시행한다.

현재 isPositive의 number로 10이 할당되었다. 타입이 숫자형인 상태이므로 resolve()가 시행되고, 양수를 반환한다. isPositive가 두번째 인자로 받은 값에 대해 콘솔에 띄우고자 하였으므로 콘솔창에는 "양수"가 뜨게 된다.

위의 코드를 promise로 바꾸면 다음과 같다.

function isPositiveP(number){
  const executor = (resolve, reject) => {
    setTimeout(() => {
    if(typeof number === "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);
});

앞서 동기, 비동기 글에서 작성했던 콜백지옥이다.

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

taskA(4, 5, (a_res) => {
  console.log(a_res);
  taskB(a_res, (b_res)=>{
    console.log(b_res);
    tadkC(b_res, (c_res) =>{
      console.log(c_res);
    });
  });
});

이는 Promise를 이용하여 다음과 같이 수정이 가능하다.

taskA(5, 1)
	.then((a_res) => {
  		console.log(a_res);
  		return taskB(a_res);
	})
	.then((b_res)=> {
          console.log(b_res);
          return taskC(b_res);
})
	.then((c_res)=>{
  		console.log(c_res);
});

콜백지옥과는 다르게 계속 들여쓰기를 하는 것이 아니라 보기좋게 일직선상으로 코드를 작성할 수 있음을 알 수 있다.

더 나아가 위의 절차들 사이에 코드를 끼워넣을 수 있다. 예를 들어 이런 식이다.

const bPromiseResult = taskA(5, 1)
	.then((a_res) => {
  		console.log(a_res);
  		return taskB(a_res);
	});

console.log("haha");

bPromiseResult
  .then((b_res)=> {
          console.log(b_res);
          return taskC(b_res);
})
  .then((c_res)=>{
  		console.log(c_res);
});