[JavaScript] Promise | 콜백지옥을 탈출하는 방법

 

동기 & 비동기 글에서 등장한 콜백 지옥을 해결하는 방법은 Promise 연산자를 사용하는 것이다.

 

Promise란?

: 자바스크립트의 비동기를 돕는 객체이다. 콜백을 줄지어서 사용하는 것을 방지해준다.

 

우선, 비동기작업이 가질 수 있는 상태는 다음과 같다.

1. 대기(Pending): 비동기 상태가 작업 중이거나 시작할 수 없는 문제가 발생한 경우
2. 이행(Fulfilled): 비동기 상태가 정상적으로 진행된 상태
3. 거부(Rejected): 버그, 또는 실패한 상태로 비동기 작업이 정상적으로 진행되지 않은 상태

• resolve: 대기 => 이행
• reject: 대기 => 거부

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

  const asyncTask = new Promise(executor); // executor를 담은 Promise 객체 생성
  return asyncTask;
}


const res = isPositiveP(101);
res
  .then((res) => {
    console.log(`작업 성공 : ${res}`); // resolve 콜백함수의 값 실행
  })
  .catch((err) => {
    console.log(`작업 실패 : ${err}`); // reject 콜백함수의 값 실행
  });

executor라는 상수에서 resolve, reject를 사용하여 setTimeout를 실행한다.

resolve는 비동기 작업이 성공했을 때의 콜백함수, reject는 비동기 작업이 실패했을 때의 콜백함수를 가지고 있다.

여기서 executor()가 비동기 작업을 실제로 수행하는 것이다.
res는 Promise 객체를 return 받게 되므로, 반환받은 객체를 가지고 then과 catch를 통해 resolve와 reject의 결과값을 사용할 수 있다.

 

 

Promise로 콜백지옥을 탈출하는 방법

# Case 1. 콜백 지옥

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(`A TASK : ${a_res}`);
  taskB(a_res, (b_res) => {
    console.log(`B TASK : ${b_res}`);
    taskC(b_res, (c_res) => {
      console.log(`C TASK : ${c_res}`);
    });
  });
});

 

# Case 2. 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}`);
  });

Promise 객체를 통해 요청이 성공하면, resolve 인수를 통해 callback 함수가 호출되고 해당 작업이 반복되는 것을 확인할 수 있다.

 

이렇게 then을 사용하여 아래로 엮어 나가는 것은 then chaining이라고 한다.

• then chaining을 사용한 코드는 콜백 지옥 코드보다 직관적이며, 가시성이 좋다.
• 여러 개의 chain 중 하나라도 reject되면 바로 마지막에 달린 catch()로 내려가서 (해당 코드에 reject 인수와 마지막 코드에 .catch(~~)를 추가해주면 된다.) 에러를 처리한다.
  • 불필요하게 나머지 promise까지 차례차례 확인하지 않는다.
• then에서 끊은 다음 다른 코드를 중간에 삽입할 수 도 있다.
  
  # Case3. 다른 코드를 중간에 삽입하여 다른 작업을 수행하는 예시

• 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);
    });
  }
  
  const PromiseResult2 = taskA(5, 1).then((a_res) => {
    console.log(`A RESULT : ${a_res}`);
    return taskB(a_res);
  });
  
  console.log("다른작업 1");
  console.log("다른작업 2");
  console.log("다른작업 3");
  console.log("다른작업 4");
  
  PromiseResult2
    .then((b_res) => {
      console.log(`B RESULT : ${b_res}`);
      return taskC(b_res);
    })
    .then((c_res) => {
      console.log(`C RESULT : ${c_res}`);
    });