콜백 지옥을 탈출 하기위한 Promise의 등장

Promise 란

“A promise is an object that may produce a single value some time in the future”

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.

Promise 구조

비동기처리를 담고 있고 콜백함수로 resolve와 reject를 가지고 있다. Promise가 특별한 이유는 콜백함수를 호출하기 위해 .then과 .catch를 사용한다는 것이다. resolve를 호출하기 위해서는 .then을 사용하며 reject를 호출하기 위해서는 .catch를 사용한다. 콜백함수가 호출 되기 전 상태를 pending(대기)이라고 하며 resolve가 호출 된 상태를 fulfilled(성공), reject가 호출 된 경우를 rejected(실패)라고 한다.

일반콜백함수로 Promise 이해하기

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

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

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
}

console.log(isPositiveP(1)) // pending
isPositiveP(1).then(res => console.log(res)).catch(err => console.log(err)) // 양수입니다. (fulfilled)
isPositiveP('1').then(res => console.log(res)).catch(err => console.log(err)) // 주어진 값이 숫자형 값이 아닙니다. (rejected)

Escape callback hell with 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(1,1).then((a_res) => {
  console.log("task A : ", a_res)
  return taskB(a_res);
}).then((b_res) => {
  console.log("task B : ", b_res)
  return taskC(b_res);
}).then((c_res) => {
  console.log("task C : ", c_res)
  return taskD(c_res);
}).then((d_res) => {
  console.log("task D : ", d_res)
  return taskE(d_res);
}).then((e_res) => {
  console.log("task E : ", e_res)
  return taskF(e_res);
}).then((f_res) => {
  console.log("task F : ", f_res)
}) ...

/* 결과
// 3초 후 >>> task A :  2
// 1초 후 >>> task B :  4
// 2초 후 >>> task C :  -4
// ...   >>> task D : ...
*/