Promise.withResolvers로 Promise 제어 객체 만들기

Promise.withResolvers로 Promise 제어 객체 만들기

Promise.withResolvers()는 Promise 객체와 함께 해당 Promise를 완료하거나 실패시킬 수 있는 resolve, reject 함수를 반환합니다. 생성자 밖에서 Promise의 상태를 제어해야 할 때 코드를 조금 더 명확하게 작성할 수 있습니다.

기존 작성 방식

기존에는 resolve와 reject를 외부에서 사용하려면 변수를 먼저 선언하고 Promise 생성자 안에서 할당해야 했습니다.

let resolveTask;
let rejectTask;

const task = new Promise((resolve, reject) => {
  resolveTask = resolve;
  rejectTask = reject;
});

resolveTask('완료');

동작에는 문제가 없지만 변수 선언과 할당이 분리되고, 타입스크립트에서는 초기화 여부까지 고려해야 합니다.

Promise.withResolvers 사용하기

Promise.withResolvers()를 사용하면 필요한 세 값을 한 번에 얻을 수 있습니다.

const {promise, resolve, reject} = Promise.withResolvers();

resolve('완료');

const result = await promise;
console.log(result); // '완료'

제네릭 타입을 지정하면 Promise가 반환할 값도 명확하게 표현할 수 있습니다.

const {promise, resolve, reject} =
  Promise.withResolvers<string>();

resolve('작업 완료');

이벤트를 기다리는 예제

한 번 발생하는 이벤트를 Promise로 감싸야 할 때 유용합니다.

function waitForClick(button) {
  const {promise, resolve} = Promise.withResolvers();

  button.addEventListener('click', resolve, {once: true});

  return promise;
}

await waitForClick(document.querySelector('#confirm'));

사용할 때 주의할 점

resolve와 reject를 외부로 노출하면 여러 코드가 Promise의 상태를 변경하려고 시도할 수 있습니다. 비동기 작업의 책임이 불분명해질 수 있으므로 이벤트 어댑터, 스트림, 큐처럼 외부 신호를 Promise로 연결해야 하는 경우에 한정해서 사용하는 것이 좋습니다.

일반적인 비동기 함수는 기존처럼 async와 await로 작성하는 편이 더 단순합니다.

정리

• Promise.withResolvers()는 promise, resolve, reject를 함께 반환합니다.

• Promise 생성자 밖에서 완료 시점을 제어해야 하는 코드를 간결하게 만들 수 있습니다.

• 이벤트나 스트림을 Promise로 변환할 때 특히 유용합니다.

• 상태 변경 책임이 넓게 퍼지지 않도록 제한된 범위에서 사용해야 합니다.