Promise 정리

Promise 는 비동기 처리를 위한 객체이다.

Promise는 콜백함수를 인수로 전달받는데, 이 안에는 resolve(비동기 처리가 성공 됐을때의 실행될 함수),

reject(비동기 처리가 실패됐을때의 실행될 함수) 두개의 함수가 있다.

그리고 resolve함수에서는 비동기 처리가 성공했을때의 결과값을 인수로 전달받고, reject 함수에서는 에러를 전달받는다.

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

  const asyncTask = new Promise(executor);

  return asyncTask;
}

const res = isPositiveP(101); // pending 상태

console.log(res);

res
  .then((res) => { // 후속처리 메서드
    console.log("작업 성공", res);
  })
  .catch((err) => {
    console.log("에러 발생", err);
  });

위의 사진을 보면 pending이라고 되어있는데, promise 객체가 생성되면 기본적으로 pending 상태이다. 즉 아직 resolve인지(성공했는지), reject인지(실패했는지) 정해지지 않은 상태라는 뜻이다.

프로미스가 pending에서 상태가 변화했을때, 이에 따른 후속 처리를 해야한다.

즉 비동기 처리가 성공됐을때의 결과값을 가지고 resolve함수가 실행되거나, 실패한다면 에러를 가지고 에러 처리를 해야한다.

이럴때 사용되는 메서드가 then, catch, finally이다.

1. then

then 메서드는 두개의 콜백 함수를 인수로 전달받는데, 첫번째 콜백함수는 promise가 resolve 됐을때 호출될 콜백함수이고, 두번째 콜백함수는 promise가 reject 됐을때의 콜백함수이다. 이때 콜백함수는 promise의 에러를 인수로 전달 받는다.

then 메서드는 언제나 항상 promise를 반환한다. 만약 콜백 함수가 promise가 아닌 값을 반환한다면, 그 값을 암묵적으로 promise로 생성해서 반환한다.

2. catch

catch 메서드는 한 개의 콜백함수를 인수로 전달받는데, promise가 reject 상태일 경우에만 호출된다.

3. finally

finally 메서드는 promise의 resolve, reject 상태에 상관없이 무조건 한번 호출 되는 콜백함수를 담고 있다.

promise의 상태와 상관없이 공통적으로 수행되어야 할 내용이 있을때 유용하다.

기존 콜백 지옥

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(b, cb) {
  setTimeout(() => {
    const res = b * -1;
    cb(res);
  }, 2000);
}

taskA(3, 4, (a_res) => {
  console.log("Task A : ", a_res);
  taskB(a_res, (b_res) => {
    console.log("Task B : ", b_res);
    taskC(b_res, (c_res) => {
      console.log("Task C : ", c_res);
    });
  });
});

⬇️ 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(b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = b * -1;
      resolve(res);
    }, 2000);
  });
}

taskA(5, 1)
  .then((a_res) => {
    console.log("A Task : ", a_res);
    return taskB(a_res); // Promise 반환
  })
  .then((b_res) => {
    console.log("B Result : ", b_res);
    return taskC(b_res); // Promise 반환
  })
  .then((c_res) => {
    console.log("C Result : ", c_res);
  });