[TIL][Asynchronous] async & awiat 자바스크립트 비동기

Async는...

async는 가장 최근에 도입된 자바스크립트 비동기 방식이다! 무려 ES8 에 추가되었는데,
ES6도 완벽히 적용하지 못하는 나에게는 아직 생소한 것이였다.. 다만 문법의 간결성이 매우 좋아서 복잡한 콜백문 & promise 를 보다가 async를 보고 있자면 시력이 0.5정도 올라가는 기분이다.
물론 최-신 문법이기 때문에 iE를 지원하지 않는다.
때문에 내가 사용하고 싶다고 마음대로 남발할 수 없는 기술인것 같다..

function getNewsAndWeather() {
  let obj = {};
  
  return fetch(newsURL)
  .then(data1 => data1.json())
  .then(json => {
    obj.data = json;
    return fetch(weatherURL);
  })
  .then(data2 =>  data2.json())
  .then(json => {
    obj.weather = json;
    return obj;
  })
}

먼저 fetch를 이용해 뉴스API와 날씨정보API를 받아와 합쳐서 객체로 내보내는 함수를 promise chain 을 이용해 구현하였다!
충분히 깔끔하고 일열로 정렬된 then들에 마음이 편안해 지지만...

async function getNewsAndWeatherAsync() {
  let obj = {};
  let news = await fetch(newsURL).then(data => data.json());
  let weather = await fetch(weatherURL).then(data => data.json());
  obj.news = news;
  obj.weather = weather;
  return obj;
}

async와 await을 사용하면 이렇게 동기 형식으로 작성할 수 있다!
동기 형식으로 코드를 작성하였지만, 실제 동작은 비동기로 동작한다!
async를 사용하기 위해 함수 앞에 async 키워드를 넣어주어야 한다

await란...

간단히 말해 동기적으로 작성할 수 있지만 실제로는 비동기 처리를 해주는 친구이다..
HTTP 통신을 통해 서버와 request 나 response를 받는 코드들의 경우 await의 사용으로 비동기적으로 사용할 수 있다. 그러나 await이 적용된 코드는 반드시 promise 객체를 반환해야 한다!