[JavaScript] Promise 프라미스화

콜백을 받는 함수를 프라미스를 반환하는 함수로 바꾸는 것을 '프라미스화(promisification)'라고 한다.

기능을 구현 하다 보면 콜백보다는 프라미스가 더 편리하기 때문에 콜백 기반 함수와 라이브러리를 프라미스를 반환하는 함수로 바꾸는 게 좋은 경우가 종종 생길 수 있다.

 

⭕️setTimeOut 함수 예시

function wait(text, milliseconds) {
  setTimeout(() => text, milliseconds);
}

// 특정 밀리세컨즈 후에 text라는 함수를 수행하는 함수

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { console.log(result); });
  
  //Url을 받아서 그 결괏값을 출력하는 fetch함수

fetch함수에 wait을 추가할 때

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => wait(`${result} by waitFunction`, 2000)) 
  // 2초 후에 리스폰스의 내용 뒤에 'by waitFunction' 추가하고 리턴
  .then((result) => { console.log(result); });

// 이때 기대한 값은 2초 후에 resutl by waitFunction이라는 값이지만
//실제로는 undefined 가 출력된다

이 wait 함수는 내부에서 setTimeout 함수를 호출한다. 그리고 setTimeout 함수의 첫 번째 파라미터로 들어간 콜백이 2초 후에 text를 리턴한다. 그런데 wait 함수가 두 번째 then 메소드 안의 콜백에서 실행될 때,
wait 함수는 setTimeout 함수를 실행할 뿐 아무것도 리턴하지 않는다.

따라서 setTimeout 함수 안의 콜백이 2초 후에 리턴하는 text는, wait 함수의 리턴값이 아니다. 따라서 wait 함수의 리턴값은 undefined가 되는 것이다.

 

setTimeout은 비동기 실행되는 함수인데, Promise Chaining 안에서 이렇게 비동기 실행되는 함수를 바로 사용하면, 나중에 실행되는 부분의 리턴값(여기서는 text)를 Promise Chain에서 사용할 수 없게 된다.

.then은 wait 함수의 리턴은 기다리지만, 그 안에 콜백함수의 리턴값이 나올 때까지 기다리지는 않아서..?

 

여기서 wait함수를 프로미스로 바꿔볼 수 있다.

function wait(text, milliseconds) {
  const p = new Promise((resolve, reject) => {
    setTimeout(() => { resolve(text); }, 2000);
  });
  return p;
}

지금 wait 함수 안에서 Promise 객체를 직접 생성했고, executor 함수 안에서 setTimeout 함수를 호출했다.

그리고 setTimeout 함수 안의 콜백에서 resolve 함수를 호출하는데 이 때 그 아규먼트로 text를 넣는다. 그렇다면 Promise 객체 p는 2초 후에 fulfilled 상태가 될 것이고, 그 작업 성공 결과는 파라미터 text의 값이 될 것이다.

wait 함수는 이제 Promise 객체 p를 리턴한다.

 

기존의 비동기 실행 함수(여기서는 setTimeout)의 콜백이 리턴하는 값을 Promise Chain에서 사용하고 싶다면, 해당 함수를 감싸서 Promise 객체를 직접 생성하는 코드를 작성해야 한다.

그리고 그 Promise 객체를 리턴해야 방금처럼 Promise Chain에서 해당 리턴값을 받아서 사용할 수 있다.

이렇게 전통적인 형식의 비동기 실행 함수를 Promise 객체로 감싸서 그 Promise 객체를 리턴하는 형식으로 만드는 작업을
Promisify(프로미스화)라고 한다.