13. javascript Promise

4. Promise

1. 콜백지옥

2. 비동기 작업이 가지는 상태 3가지

3. Promise 사용

4. 기존 코드 콜백지옥에서 Promise 이용하여 벗어나기

1. 콜백지옥

비동기방식의 콜백이 깊어지는 것 ⇒ 콜백지옥

자바스크립트의 비동기를 돕는것 ⇒ Promise

아래처럼 콜백 지옥에 빠질 수 있다.

//콜백에 콜백에 콜백...
taskA(4, 5, (a_res) => {
  console.log("A result ", a_res);
  taskB(a_res, (b_res) => {
    console.log("B result ", b_res);
    taskC(b_res, (c_res) => {
      console.log("C result ", c_res);
    });
  });
});

//...

---

2. 비동기 작업이 가지는 상태 3가지

Pending (대기 상태) : 비동기 작업이 진행중이거나, 작업을 할 수없는 문제일 경우

Fulfilled (성공) : 비동기 작업이 정상적으로 수행한 상태

Rejected (실패) : 비동기 작업이 실패한 상태

Pending (대기 상태) → Fulfilled (성공) : resolve (해결) 이라 부른다.

Pending (대기 상태) → Rejected (실패) : reject (거부) 라 부른다.

resolve (해결)

function isPositive(number, resolve, reject) {
  setTimeout(() => {
    if (typeof number === "number") {
      // 성공 resolve
      resolve(number >= 0 ? "양수" : "음수");
    } else {
      // 실패 reject
      reject("숫자형 타입이 아닙니다.");
    }
  }, 2000);
}

isPositive(
  10,
  (res) => {
    console.log("성공적 수행:", res);
  },
  (err) => {
    console.log("실패 :", err);
  }
);

3. Promise 사용

function isPositiveP(number) {

// Promise 선언하면 파라미터 순서에따라 1번째는 resolve, 2번째는 reject 이다.
  const excutor = (resolve, reject) => { 
    setTimeout(() => {
      if (typeof number === "number") {
        // 성공 resolve
        console.log(number);
        resolve(number >= 0 ? "양수" : "음수");
      } else {
        // 실패 reject
        reject("숫자형 타입이 아닙니다.");
      }
    }, 1000);
  };

  const asyncTask = new Promise(excutor);
  return asyncTask;
}

const res = isPositiveP(999);

res
  .then((res) => {
    console.log("작업성공:", res);
  })
  .catch((err) => {
    console.log("작업실패:", err);
  });

4. 기존 코드 콜백지옥에서 Promise 이용하여 벗어나기

기존코드(클릭) 🤏

function taskA(a, b) {
  return new Promise((success, fail) => {
    setTimeout(() => {
      const response = a + b;
      success(response);
    }, 3000);
  });
}

function taskB(a) {
  return new Promise((success, fail) => {
    setTimeout(() => {
      const response = a * 2;
      success(response);
    }, 1000);
  });
}

function taskC(a) {
  return new Promise((success, fail) => {
    setTimeout(() => {
      const response = a * -1;
      success(response);
    }, 2000);
  });
}

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

console.log("끝");

바꿔보니 거의 변한게 없다..

이렇게 사용하는것이 아니라서 그렇다.

제대로된 사용법

function taskA(a, b) {
  return new Promise((success, fail) => {
    setTimeout(() => {
      const response = a + b;
      success(response);
    }, 3000);
  });
}

function taskB(a) {
  return new Promise((success, fail) => {
    setTimeout(() => {
      const response = a * 2;
      success(response);
    }, 1000);
  });
}

function taskC(a) {
  return new Promise((success, fail) => {
    setTimeout(() => {
      const response = a * -1;
      success(response);
    }, 2000);
  });
}

taskA(3, 4)
  .then((a_res) => {
    console.log("A result", a_res);
    return taskB(a_res); // B promise 반환
  })
  .then((b_res) => {
    // promise 반환했기때문에 또 .then 가능.
    console.log("B result", b_res);
    return taskC(b_res); // C promise 반환
  })
  .then((c_res) => {
    // promise 반환했기때문에 또 .then 가능.
    console.log("C result", c_res);
  });

console.log("끝");