콜백(callback) 함수를 Promise로 바꾸기 (콜백함수로 await 쓰기)

필요성

가끔, 여러 npm 라이브러리 중에서 async/await 또는 Promise를 지원하지 않고 callback만을 지원하는 경우가 있다.

(에러 처리를 아직 callback으로 하는 라이브러리가 종종 있다)

 

또는, 예전에 작성한 코드를 리펙토링 하는 과정에서 callback을 Promise 등으로 바꾸고자 하는 경우가 있다.

이러한 상황에서 callback 함수를 Promise로 변환하는 과정이 필요하다.

 

해결방법

간단하다. Promise 생성자를 통해 바꾸어주면 된다.

콜백 함수가 받는 인자들도 모두 온전히 사용할 수 있다.

콜백 함수가 원래 받던 인자들을 그대로 받으면서,

Promise를 return 하는 새로운 함수를 만들어 주면 된다.

 

callback 예시 코드

그냥 callback 만 사용하면

callback 예시 코드

 

callback 예시 코드 실행 결과

callback 예시 코드 실행 결과

이처럼 undefind 가 나온다. (cb의 return 값을 기다리지 않고 다음 문을 실행하기 때문이다.)

 

Promise로 수정된 예시 코드

Promise로 수정된 예시 코드

 

Promise로 수정된 예시 코드 실행 결과

Promise로 수정된 예시 코드 실행 결과

정상적으로 기대한 값("aba")이 나온다.

참고로, 예시에서 보이는 것과 같이, Promise로 바꾸었다면 then, catch 말고  async/await 키워드를 사용하는 것을 권장한다.

 

Promise 추가 설명

new Promise 생성자로 Promise를 생성할 수 있다.

받는 인자는 콜백함수 두 개이다.

첫 번째가 resolve, 두 번째가 reject.

각각 Promise 성공과 실패를 의미하며 해당 함수가 호출되면 Promise는 종료된다.

 

자세한 건 아래 링크 참조.

Promise() 생성자 - JavaScript | MDN