Explanation
우연히 다른 블로그에서 Promise에 관련된 글의 댓글에 있는 질문을 보고 답변을 적다가 만들게 된 예제 코드입니다. 간단하게 Promise에 대해 이해하는 데 도움이 될 것 같아서 블로그에도 적어보려 합니다.
아래의 내용과 거의 동일하지만 JSFiddle에서 실행을 바로 확인해볼 수 있습니다.
https://jsfiddle.net/falsy/pf14ghqy/
function testPromise() {
return new Promise((resolve, reject) => {
// 2. 약 1초 후에 완료되는 비동기 통신을 가정하여 setTimeout을 사용합니다.
setTimeout(() => {
resolve('success');
// 3. resolve가 실행되어 현재의 Promise의 상태가 "대기(pending)"에서 "이행(fulfilled)"으로 변경되며, "success"라는 "이행값(fulfilled value)"을 가지고 있습니다.
reject("failure reason");
// 4. reject를 만났지만 현재 Promise의 상태가 "대기(pending)"가 아니기 때문에 무시됩니다.
console.log('ok');
// ok
// 5. resolve나 reject가 자체적으로 return을 의미하지는 않기 때문에 스코프 안의 이후 코드는 모두 실행이 됩니다.
}, 1000);
});
}
// 1. testPromise() 함수를 호출하며 Promise를 이용한 통신을 시작합니다. 그리고 (대기, 성공, 실패)의 상태를 가지고 있는 Promise객체를 request라는 변수에 담습니다.
const request = testPromise();
setTimeout(() => {
// 6. 조금 더 Promse를 이해하기 위해 "request"라는 변수에 확실히 통신이 완료된 값을 가지고 있을거라 예상할 수 있는 3초 후에 then 메소드를 호출합니다.
// 7. 현재 시점에서 request라는 변수에는 "이행(fulfilled)"상태에 "success"라는 "이행값(fulfilled value)"을 가지고 있는 Promse 객체를 담고 있습니다.
request.then(res => {
// 8. Promse 객체가 이행했기 때문에 then 메서드의 첫번째 인자에 이행값을 가지고 있는 함수가 실행됩니다.
console.log(res);
// success
}).catch(err => {
// Promise의 상태가 거부가 아니기 때문에 호출되지 않습니다.
console.log(res);
});
}, 3000);



