Promise.withResolvers 무엇을 위해 나온걸까요?
Promise.withResolvers 라는 새로운 API가 ECMAScript 2024에 추가가 되었습니다. 해당 API는 new Promise() 를 통하지 않고도 Promise를 생성 할 수 있도록 해줍니다.new Promise(…) - the revealing constructor pattern
보통 저희는 아래와 같은 패턴으로 Promise를 생성하게 됩니다.
기본적으로 Promise는 공개 생성자 패턴을 사용하고 있어 callback 함수내에서만 resolve, reject 함수에 접근할 수 있다는 특징을 가지고 있습니다.
이는 resolve와 reject 함수를 외부에서 접근하여 상태를 변경 할 수 없어, promise 상태를 안전하게 보호 할 수 있도록 해줍니다.
한 가지 예로 callback 함수 기반으로 되어 있는 파일을 읽는 기능을 수행하는 코드를 promise로 변경한다면 다음과 같습니다.
Promise.withResolvers()
공개생성자 패턴을 사용하고 있는
new Promise 는 resolve, reject를 callback 함수 외부에는 노출시키지 않는다는 측면에서 안전하다는 장점이 있습니다. 하지만 resolve와 reject를 외부에서 사용하고 관리하고자 한다면 적절한 방법은 아닙니다.Promise.withResolvers 는 factory pattern을 활용하여 이러한 한계점을 해결하였으며 다음과 같은 방식으로 사용할 수 있습니다.- resolve: Promise 이행 함수
- reject: Promise 거부 처리 함수
- promise: Promise 객체
그렇다면 내부 구현은 어떻게 되어 있는걸까요? 사실 매우 간단합니다. 아래 코드 처럼 말이죠.
이 기능이 제안되고 추가된 이유는 무엇일까요? 사실 이유는 간단하게 많은 라이브러리(react, vue, axios, typescript, vite 등)들이 코드내 해당 방법을 활용하고 있기 때문이라고 하며 Promise의 정적 메서드로 추가하여 좀 더 간편하게 사용할 수 있도록 하기 위해서 라고 합니다.
아래는 해당 기능을 활용하고 있는 라이브러리들로 어떤 방식으로 사용이 되고 있는지 한번 확인해보는것도 좋을거 같습니다.
React | |
Vue | |
Axios | |
TypeScript | |
Vite | |
Deno stdlib |
결론
ECMAScript 2024에 새로 추가된
Promise.withResolvers()는 기존 Promise를 생성하는 방식에 비해 더 유연하고 관리하기 쉬운 방법을 제공합니다. 이 API를 통해 resolve와 reject를 외부에서 관리할 수 있게 되어, 다양한 상황에서 Promise를 보다 효율적으로 사용할 수 있을거 같습니다.하지만 아직 개인적으로 어떤 상황에서 resolve와 reject를 외부에서 꺼내서 사용하면 좋을지 잘모르겠습니다. 흠… 관련 코드 좀 더 찾아보고 어떤 유즈케이스가 있는지 알아봐야 될거 같습니다.