비동기 호출, Promise를 이해해 보자.

1. 프롤로그
2. promise?

MFC를 사용하는 윈도 프로그래머지만, reactjs, electron에 관심을 가지면서 신묘한 자바스크립트 문법에 적응이 안 되었는데, 그중 하나가 promise!

 

C 프로그램만 하던 나로서는 이게 인터럽트도 아니고, 스레드도 아니고, 콜백도 아닌 것이,

 

프로그램 코드 진행은 그대로 지나갔는데, 나중에 코드가 실행되니 신기했다. 

 

만약, fetch를 사용하는 아래와 같은 코드를 실행하면,

 

console.log("fetch 시작");

fetch("http://example.com/list.json")
  .then(res => {
    return res.json();
  })
  .then(json => {
    console.log(JSON.stringify(json));
  });
  
console.log("fetch 끝");

 

보통 콘솔창에 아래와 같은 순서로 출력된다.

 

fetch 시작
fetch 끝
list.json 내용 출력...

 

이게 익숙한 JS 프로그래머는 당연한걸 왜 신기해하지? 그럴테지만, 난 완전 신기. 이게 어떻게 가능한거지??

 

난 fetch 시작이 출력되고, list.json 내용이 출력되고, fetch 끝이 순서대로 출력될 줄 알았는데.... 

 

그래서 promise가 뭔지 공부! 공부!

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise

Promise 객체는 비동기 작업의 완료 또는 실패와 결과 값을 나타낸다? 

 

 

 

 

뭔가 아리송.... 알듯말듯.... 설명 페이지에 있는 그림을 보면 살짝 감이 온다.

 

출처: https://developer.mozilla.org/

내부 메커니즘은 잘 모르겠지만, promise는 async actions로 표시된 박스를 비동기로 실행한 후 그 결과를 반환할 테니,

 

then으로는 성공의 결과값을 catch로는 실패의 결과값을 받아서 사용해라로 이해하면 될 것 같다.

 

그리고, async actions가 promise를 반환하면, 계속, then, catch를 붙여서 비동기 함수를 줄줄이 붙일 수도있다!!

 

Promise 생성자는 매우 간결한데,

 

new Promise(executor)

 

executor는 resolve 와 reject를 매개 변수로 받고, 비동기 작업이 성공하면 reject를 실행하고,

 

뭔가 마음에 안들면 에러 메시지와 함께 reject를 실행하면 된다.

 

바로 실습한번 가보겠습니다.

 

const firstPromise = value => {
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      if(value > 1000) {
      	resolve("Good!");
      } else {
        reject("value is too small.");
      }
    }, 1000);	
  });
};

firstPromise(100)
  .then(res => console.log(res))
  .catch(e => console.log(e));

firstPromise(1001)
  .then(res => console.log(res))
  .catch(e => console.log(e));

 

위 코드를 크롬 콘솔창에서 실행하면,

 

promise 예제

어떤 값을 입력받은 후 1초뒤에 값이 1000보다 크면 Good!을 출력하고 작으면 value is too small.을 출력합니다.

 

오.... 신기.... 콜백 함수 없이, 코드가 깔끔해 졌다.

 

이번엔 promise의 기본에 대해서 알아보았습니다.

 

다음엔 promise의 다른 사용법과 다른 동기화 방법에 대해서 공부한 후 돌아오겠습니다.