[JavaScript] Promise 💬

locked-in

P의 settlement value가 Q라고 할 때, Q의 Promise가 resolved/rejected 되어야 P의 settlement value가 결정됨
→ P를 Q에 lock-in 한다!! (P가 locked-in 되는 주체)

📌 Promise의 Fates

Promise는 다음 2가지 중 하나의 fate를 가짐

resolved : Promise를 resolve/reject 하려 해도 효과가 없는 상태
즉, locked-in이거나 fulfilled, rejected
unresolved : resolved 되지 않은 상태

⭐ 중요한 건, fulfill과 resolve는 같은 말이 아님!!

📌 Promise의 과정

이행 또는 거부 될 때, then 메서드에 의해 대기열(큐)에 추가되었던 처리기들이 호출됨

new Promise((resolveOuter) => {
  resolveOuter(
    new Promise((resolveInner) => {
      setTimeout(resolveInner, 1000);
    }),
  );
});

이 Promise는 생성될 때 resolveOuter가 동기적으로 호출되기 때문에 이미 해결되었지만,
다른 Promise와 함께 해결되므로 1초 후 내부 Promise가 fulfill 될 때까지는 fulfill되지 않음

📌 Promise 체이닝

then(), catch(), finally() 사용 가능
이러한 메서드들도 Promise를 반환하므로, 연쇄적으로 사용 가능하다

then()

최대 2개의 인수를 받음
① 첫 번째 인수 : Promise가 이행된 경우에 대한 콜백 함수
② 두 번째 인수 : Promise가 거부된 경우에 대한 콜백 함수
Promise의 종료 조건에 따라 체인에서 다음 Promise의 settled 상태 결정

📌 Promise 동시성

Promise 클래스는 비동기 작업의 동시성을 용이하게 하기 위해 4가지 정적 메서드 제공

Promise.all() : 모든 프로미스가 이행되면 이행되고, 프로미스 중 하나라도 거부되면 거부됨
Promise.allSettled() : 모든 프로미스가 해결되면 이행됨
Promise.any() : 프로미스 중 하나라도 이행되면 이행하고, 모든 프로미스가 거부되면 거부됨
Promise.race() : 프로미스 중 하나라도 해결되면 해결됨 (즉, 하나라도 이행되면 이행되고, 하나라도 거부되면 거부됨)

📌 추가 정적 메서드

정적 메서드

Promise.reject(reason) : 주어진 사유로 거부하는 Promise 객체 반환
Promise.resolve() : 주어진 값으로 이행하는 Promise 객체 반환
이때 지정한 값이 then 메서드를 가지는 값인 경우, Promise.resolve()가 반환하는 Promise는 then 메서드를 "따라가서" 자신의 최종 상태 결정

📌 활용 예제

let myFirstPromise = new Promise((resolve, reject) => {
  // 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.
  // 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
  // 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
  setTimeout(function () {
    resolve("성공!"); // 와! 문제 없음!
  }, 250);
});

myFirstPromise.then((successMessage) => {
  // successMessage는 위에서 resolve(...) 호출에 제공한 값입니다.
  // 문자열이어야 하는 법은 없지만, 위에서 문자열을 줬으니 아마 문자열일 것입니다.
  console.log("와! " + successMessage);
});

new Promise()로 새로운 Promise 객체 생성
이 Promise는 비동기 작업이 끝난 후, 2가지 콜백 중 하나인 resolve나 reject를 호출해서 이행/거부 여부를 알림
setTimeout() 비동기 작업이 잘 실행되면, resolve("성공!")이 Promise를 이행 상태로 변경하며, "성공!"이라는 메시지를 전달함

myFirstPromise.then(...)은 Promise가 이행 상태가 되면 실행할 코드 정의
successMessage는 resolve("성공!") 호출에서 전달된 값, 즉 "성공!"

오류 실행 예제

// 오류 처리를 실험하기 위해 'threshold' 값은 무작위로 오류를 발생시킵니다.
const THRESHOLD_A = 8; // 0을 사용하여 오류를 보장할 수 있습니다.

function tetheredGetNumber(resolve, reject) {
  setTimeout(() => {
    const randomInt = Date.now();
    const value = randomInt % 10;
    if (value < THRESHOLD_A) {
      resolve(value);
    } else {
      reject(`Too large: ${value}`);
    }
  }, 500);
}

function determineParity(value) {
  const isOdd = value % 2 === 1;
  return { value, isOdd };
}

function troubleWithGetNumber(reason) {
  const err = new Error("Trouble getting number", { cause: reason });
  console.error(err);
  throw err;
}

function promiseGetWord(parityInfo) {
  return new Promise((resolve, reject) => {
    const { value, isOdd } = parityInfo;
    if (value >= THRESHOLD_A - 1) {
      reject(`Still too large: ${value}`);
    } else {
      parityInfo.wordEvenOdd = isOdd ? "odd" : "even";
      resolve(parityInfo);
    }
  });
}

new Promise(tetheredGetNumber)
  .then(determineParity, troubleWithGetNumber)
  .then(promiseGetWord)
  .then((info) => {
    console.log(`Got: ${info.value}, ${info.wordEvenOdd}`);
    return info;
  })
  .catch((reason) => {
    if (reason.cause) {
      console.error("Had previously handled error");
    } else {
      console.error(`Trouble with promiseGetWord(): ${reason}`);
    }
  })
  .finally((info) => console.log("All done"));