Firebase의 Hosting, Functions, Firestore를 이용하여 웹상에 메모장을 만들기
2018-02-13
자바스크립트의 Promise를 이해하는데 참고할 수 있는 간단한 예제코드
2019-02-09
Explanation
우연히 다른 블로그에서 Promise에 관련된 글의 댓글에 있는 질문을 보고 답변을 적다가 만들게 된 예제 코드입니다. 간단하게 Promise에 대해 이해하는 데 도움이 될 것 같아서 블로그에도 적어보려 합니다.
아래의 내용과 거의 동일하지만 JSFiddle에서 실행을 바로 확인해볼 수 있습니다.
https://jsfiddle.net/falsy/pf14ghqy/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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); |
