Javascript #5 자바스크립트 Promise와 Async/Await

Explanation

오늘은 자바스크립트의 ES6 표준에 정의된 Promise와 ES8 초안에 들어온 Async/Await에 대하여 적어보려합니다. Generator도 함께 적으면 좋을거 같지만.. 이미 쓴적이 있어서 궁금하신 분은 아래 링크를 참고하세요.
https://lab.falsy.me/Generator-Co-Async-를-이용한-비동기-순차-실행시키기

Promise

Promise 약속, 정말 좋은 이름인 거 같아요. Promise는 비동기 통신에서 사용되며 통신의 응답에 대한 약속이라고 생각하면 될 거 같아요.
필요로 하는 부분을 요청하고 요청에 대한 성공 또는 실패 여부를 약속합니다.

아래에서 예를 적겠지만, Promise는 대기(pending), 이행(fulfilled), 거부(rejected) 이렇게 3가지의 상태값을 가지고 있습니다.

Async/Await

Async 비동기, Await 기다리다.
어쩌면 이 부분을 적으려고 이 글을 쓰기 시작한거 같아요. 전 아래의 예제가 재미있었어요.

아직 Async/Await를 지원하지 않는 브라우저가 많아서 Node(v7.6+)에서 확인해보는게 좋을거 같습니다.

function 앞에 async를 붙여서 이 함수가 비동기 함수임을 선언하고 await를 만나면 그 함수의 응답을 기다려요. 결과적으로 위 함수 series를 실행하면 ‘done!’이라는 응답값을 받기까지 약 1초의 시간이 걸리고 parallel는 약 0.5초의 시간이 걸린답니다.

간단하게 이야기하면,
series()는 wait1에서 통신의 시작부터 끝까지를 기다려요(약500ms) 그리고 기다림이 끝나고 나면 다시 wait2에서 통신의 시작부터 끝까지를 기다리죠(약500ms) 그래서 마지막 리턴까지 약 1000ms의 시간이 걸려요.
하지만 parallel()는 응답과 상관없이 wait1과 wait2의 통신을 거의 동시에 요청해요. 그리고 바로 responseWait1은 wait1의 응답을 기다린답니다. 위 예의 경우에는 responseWait1가 wait1의 응답을 받을 쯤에는 이미 wait2에는 응답값을 가지고 있겠죠? 그래서 그 순서는 유지하면서 시간으로는 이득을 볼 수 있어요.

이 글과 이 예제가 비동기 통신을 병렬적인 수행하는 것이 무조건 좋다고 이야기하려는건 아니에요. 이러나 저러나 브라우저에서는 병렬 통신이 4~6개 정도로 제한이 되기도 하고, 한번에 많은 통신은 서버나 브라우저에 순간적으로 많은 부하가 될 수도 있어요.

그리고 위에 parallel()에서 아래와 같이 코드를 테스트 해보면,

wait1에서 요청을 하고 바로 wait1에 console.log를 찍어보면 아까 위에서 이야기 했던 Promise의 ‘대기(pending)’ 상태 값을 확인 할 수 있습니다.

참고 링크

https://developers.google.com/web/fundamentals/primers/promises
https://developers.google.com/web/fundamentals/primers/async-functions
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await
https://medium.com/@constell99/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-async-await-%EA%B0%80-promises%EB%A5%BC-%EC%82%AC%EB%9D%BC%EC%A7%80%EA%B2%8C-%EB%A7%8C%EB%93%A4-%EC%88%98-%EC%9E%88%EB%8A%94-6%EA%B0%80%EC%A7%80-%EC%9D%B4%EC%9C%A0-c5fe0add656c

참고 링크 중, ‘Async/Await이 Promise를 사라지게 만들 수 있다’는 글이 있는데 이는 그냥 관심을 끌기 위한 제목일 뿐, Async/Await와 Promise를 대립적으로 비교할 수 있는 요소들이 아닌거 같아요. 둘은 비동기 통신에서 함께 사용된다고 생각하는게 맞을 거 같아요.

Leave a Reply