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