번역 서비스

Promise 객체는 비동기 작업이 최종적으로 완료되거나 실패한 것, 그리고 그 결과값을 나타내요.

프로미스의 생명 주기

Promise에는 세 가지 상태가 있어요:

1. 대기 중
2. 이행됨
3. 거부됨

프로미스는 생성될 때 대기 중이에요. 미래의 어느 시점에 _이행_되거나 _거부_될 수 있어요. 한 번 이행되거나 거부된 프로미스는 다시 이행되거나 거부될 수 없고, 상태도 바뀌지 않아요.

다시 말해서:

1. 대기 중일 때 프로미스는:
   • 이행 또는 거부 상태로 전환될 수 있어요.
2. 이행됐을 때 프로미스는:
   • 다른 어떤 상태로도 전환되면 안 돼요.
   • 값을 가져야 하고, 그 값은 바뀌면 안 돼요.
3. 거부됐을 때 프로미스는:
   • 다른 어떤 상태로도 전환되면 안 돼요.
   • 이유를 가져야 하고, 그 이유는 바뀌면 안 돼요.

프로미스 이행하기

프로미스는 여러 가지 방법으로 이행될 수 있어요:

// Creates a promise that is immediately resolved
Promise.resolve(value);

// Creates a promise that is immediately resolved
new Promise((resolve) => {
  resolve(value);
});

// Chaining a promise leads to a resolved promise
somePromise.then(() => {
  // ...
  return value;
});

위 예시에서 value는 오류, undefined, null, 다른 프로미스 등 무엇이든 될 수 있어요. 보통은 오류가 아닌 값으로 이행하고 싶을 거예요.

프로미스 거부하기

프로미스는 여러 가지 방법으로 거부될 수 있어요:

// Creates a promise that is immediately rejected
Promise.reject(reason)

// Creates a promise that is immediately rejected
new Promise((_, reject) {
  reject(reason)
})

// Chaining a promise with an error leads to a rejected promise
somePromise.then(() => {
  // ...
  throw reason
})

위 예시에서 reason은 오류, undefined, null 등 무엇이든 될 수 있어요. 보통은 오류로 거부하고 싶을 거예요.

프로미스 연결하기

프로미스는 이행되거나 거부된 뒤에, 이후 동작으로 이어갈 수 있어요.

• promise가 이행되면 promise.then()이 호출돼요
• promise가 거부되면 promise.catch()가 호출돼요
• promise가 이행되거나 거부되면 promise.finally()가 호출돼요

then

모든 프로미스는 "thenable"이에요. 즉, 원래 프로미스가 이행되면 실행되는 then 함수가 있다는 뜻이에요. promise.then(onResolved)에서 콜백 onResolved는 원래 프로미스가 이행된 값을 받아요. 그러면 항상 새로운 "연결된" 프로미스가 반환돼요.

then에서 value를 반환하면 "연결된" 프로미스가 이행돼요. then에서 reason을 던지면 "연결된" 프로미스가 거부돼요.

const promise1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);
});

const promise2 = promise1.then(function (value) {
  console.log(value);
  // expected output: "Success!"

  return true;
});

약 1000ms 후에 "Success!"가 출력돼요. promise1의 상태와 값은 resolved와 "Success!"가 돼요. promise2의 상태와 값은 resolved와 true가 돼요.

원래 프로미스가 거부될 때 실행되는 두 번째 인자도 있어요. promise.then(onResolved, onRejected)에서 콜백 onResolved는 원래 프로미스가 이행된 값을 받고, 콜백 onRejected는 프로미스가 거부된 이유를 받아요.

const promise1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);

  if (Math.random() < 0.5) {
    reject('Nope!');
  }
});

function log(value) {
  console.log(value);
  return true;
}

function shout(reason) {
  console.error(reason.toUpperCase());
  return false;
}

const promise2 = promise1.then(log, shout);

• 약 1/2의 경우, 약 1000ms 후에 "Success!"가 출력돼요.
  • promise1의 상태와 값은 resolved와 "Success!"가 돼요.
  • promise2의 상태와 값은 resolved와 true가 돼요.
• 약 1/2의 경우, 즉시 "NOPE!"가 출력돼요.
  • promise1의 상태와 값은 rejected와 Nope!가 돼요.
  • promise2의 상태와 값은 resolved와 false가 돼요.

생명 주기 규칙 때문에, 프로미스가 reject하면 약 1000ms 뒤에 오는 resolve는 조용히 무시된다는 점을 이해하는 게 중요해요. 한 번 거부되거나 이행된 뒤에는 내부 상태가 바뀔 수 없기 때문이에요. 프로미스에서 값을 반환하면 그 프로미스가 이행되고, 값을 던지면 거부된다는 점도 이해하는 게 중요해요. promise1이 이행되고 연결된 onResolved가 있으면, 즉 then(onResolved)라면 그 후속 작업은 이행되거나 거부될 수 있는 새로운 프로미스예요. promise1이 거부되고 연결된 onRejected가 있으면, 즉 then(, onRejected)라면 그 후속 작업은 이행되거나 거부될 수 있는 새로운 프로미스예요.

catch

때로는 오류를 잡아 두고 원래 프로미스가 reject할 때만 이어가고 싶을 때가 있어요. promise.catch(onCatch)에서 콜백 onCatch는 원래 프로미스가 거부된 이유를 받아요. 그러면 항상 새로운 "연결된" 프로미스가 반환돼요.

catch에서 value를 반환하면 "연결된" 프로미스가 이행돼요. catch에서 reason을 던지면 "연결된" 프로미스가 거부돼요.

const promise1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);

  if (Math.random() < 0.5) {
    reject('Nope!');
  }
});

function log(value) {
  console.log(value);
  return 'done';
}

function recover(reason) {
  console.error(reason.toUpperCase());
  return 42;
}

const promise2 = promise1.catch(recover).then(log);

약 1/2의 경우, 약 1000ms 후에 "Success!"가 출력돼요. 나머지 1/2의 경우, 즉시 42가 출력돼요.

• promise1이 이행되면 catch는 건너뛰고 then에 도달해서 값을 출력해요.
  • promise1의 상태와 값은 resolved와 "Success!"가 돼요.
  • promise2의 상태와 값은 resolved와 "done"이 돼요;
• promise1이 거부되면 catch가 실행되는데, 이때 _값을 반환_하므로 연결이 이제 resolved가 되고, then에 도달해서 값을 출력해요.
  • promise1의 상태와 값은 rejected와 "Nope!"가 돼요.
  • promise2의 상태와 값은 resolved와 "done"이 돼요;

finally

때로는 프로미스가 이행되든 거부되든 상관없이, 프로미스가 끝난 뒤에 코드를 실행하고 싶을 때가 있어요. promise.finally(onSettled)에서 콜백 onSettled는 아무것도 받지 않아요. 그러면 항상 새로운 "연결된" 프로미스가 반환돼요.

finally에서 value를 반환하면 원래 프로미스의 상태와 값을 그대로 복사하고, value는 무시해요. finally에서 reason을 던지면 "연결된" 프로미스를 거부하고, 원래 프로미스의 상태와 값 또는 이유를 덮어써요.

예시

여러 메서드를 함께 사용한 예시예요:

const myPromise = new Promise(function (resolve, reject) {
  const sampleData = [2, 4, 6, 8];
  const randomNumber = Math.round(Math.random() * 5);

  if (sampleData[randomNumber]) {
    resolve(sampleData[randomNumber]);
  } else {
    reject('Sampling did not result in a sample');
  }
});

const finalPromise = myPromise
  .then(function (sampled) {
    // If the random number was 0, 1, 2, or 3, this will be
    // reached and the number 2, 4, 6, or 8 will be logged.
    console.log(`Sampled data: ${sampled}`);
    return 'yay';
  })
  .catch(function (reason) {
    // If the random number was 4 or 5, this will be reached and
    // reason will be "An error occurred". The entire chain will
    // then reject with an Error with the reason as message.
    throw new Error(reason);
  })
  .finally(function () {
    // This will always log after either the sampled data is
    // logged or the error is raised.
    console.log('Promise completed');
  });

• randomNumber가 0-3인 경우:
  • myPromise는 2, 4, 6, or 8 값으로 이행돼요
  • finalPromise는 'yay' 값으로 이행돼요
  • 로그가 두 개 남아요:
    • Sampled data: ...
    • Promise completed
• randomNumber가 4-5인 경우:
  • myPromise는 'Sampling did not result in a sample'이라는 이유로 거부돼요
  • finalPromise는 Error('Sampling did not result in a sample')이라는 이유로 거부돼요
  • 로그가 하나 남아요:
    • Promise completed
    • 일부 환경에서는 "uncaught rejected promise: Error('Sampling did not result in a sample')" 로그가 남아요

위에서 보았듯이 reject는 문자열과 함께 동작하고, 프로미스는 Error로도 거부할 수 있어요.