직접적으로 Promise 객체를 만들어서 사용되는 일은 적다. 하지만 전통적인 형식의 비동기 실행 함수를 사용하는 코드를, Promise 기반의 코드로 변환하기 위해 Promise 객체를 직접 만드는 경우가 있다.
예를 들어 자바스크립트 내장된 비동기 setTimeout
함수를 예시로 들어보면
function wait(text, milliseconds) {
setTimeout(() => text, milliseconds);
}
wait
함수는 특정 밀리세컨즈만큼 시간이 지난 후에 text
파라미터로 전달받은 값을 리턴하는 함수를 만들었다. 이 wait
함수를 Promise Chaining 코드에서 사용하게된다면
function wait(text, milliseconds) {
setTimeout(() => text, milliseconds);
}
fetch('<https://jsonplaceholder.typicode.com/users>')
.then((response) => response.text())
.then((result) => wait(`${result} by Codeit`, 2000)) // 2초 후에 리스폰스의 내용 뒤에 'by Codeit' 추가하고 리턴
.then((result) => { console.log(result); });
값은 by Codeit이 출력되지 않고 undefined
가 출력된다. 그 이유는 wait
함수에 있는데 wait
내부에서는 setTimeout 함수를 호출한다. 그리고 setTimeout 함수의 첫 번째 파라미터로 들어간
콜백이 2초 후에 text
를 리턴하는 형식이지만. wait
함수가 Promise Chaining 안에 즉 두 번째 then
메서드 안의 콜백에서 실행될 때, wait
함수는 setTimeout
함수를 실행할 뿐
그안의 text
는 wait
함수의 리턴값이 아니기 때문에 아무것도 리턴하지 않는다. 그렇기에 아무것도 리턴하지않으면 undefined
가 리턴이 된다.
이 상황을 해결하기위해 즉 내장된 비동기를 이용한 함수를 실행시키기 위해서는 Promise 객체를 직접 만들어 코드를 작성해야한다.
function wait(text, milliseconds) {
const P = new Promise((resolve, reject) => {
setTimeout(() => {resolve(text)}, milliseconds)
})
}
fetch('<https://jsonplaceholder.typicode.com/users>')
.then((res) => res.json())
.then((result) => wait(`${result} by new Promise`, 2000)) // 2초 후에 리스폰스 내용 뒤에 'by new Promise'를 추가하고 리턴
.then((result) => { console.log(result) });
이렇게 새로운 Promise 객체를 만들어 그 값을 리턴하는 함수를 만들고 전달하게 된다면
약 2초 후에 리스폰스의 내용이 잘 출력되고 내용 마지막에는 설정 했던 문구
by new Promise
가 잘 출력되는 것을 알 수 있다. 위 사례처럼 기존의 비동기 실행 함수의
콜백이 리턴하는 값을 Promise Chain에서 사용하고 싶다면, 해당 함수를 감싸서 Promise 객체를
직접 생성하는 코드를 작성해햔다. 이런 작업을 Promisify
라고 한다.