[JavaScript] Promise - 콜백 지옥에서 탈출하기

function taskA(a, b, callback) {
  setTimeout(() => {
    const result = a + b;
    callback(result);
  }, 2000);
}

function taskB(a, callback) {
  setTimeout(() => {
    const result = a * 2;
    callback(result);
  }, 3000);
}

taskA(3, 4, (a_res) => {
  console.log("taskA : " + a_res);
  taskB(a_res, (b_res) => {
    console.log("taskB : " + b_res);
  });
});

이러한 콜백지옥의 코드를 해결하기위해 Promise 객체를 사용함.
Promise객체는 resolve(성공)시와, reject(실패)시의 처리를 각각 할 수 있음.

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = a + b;
      resolve(result);
    }, 2000);
  });
}

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = a * 2;
      resolve(result);
    }, 3000);
  });
}

taskA(3, 4).then((a_res) => {
  console.log("taskA : " + a_res);
  taskB(a_res).then((b_res) => {
    console.log("taskB : " + b_res);
  });
});

프로미스가 반환되고 성공시의 처리를 위해 .then()을 사용

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = a + b;
      resolve(result);
    }, 2000);
  });
}

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = a * 2;
      resolve(result);
    }, 3000);
  });
}

taskA(3, 4)
  .then((a_res) => {
    console.log("taskA : " + a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log("taskB : " + b_res);
  });

위의 코드를 더 간결히 표현할 수 있음