동기 vs 비동기 (3) - async/ await

🎃 async / await

• 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법
• promise를 활용하여 비동기 처리를 실행하는 문법
  (Promise chaining을 계속하게 되면, 코드가 난잡해지는 경우가 생기는데async & await은 Promise를 조금 더 간편하고, 간결하게 만들고, 동기적으로 실행되는 것처럼 보이게 해준다)
  ❗ 즉, 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다

👉 Async와 Await을 사용하면, 동기식으로 순서대로 작성하는 것처럼, 간편하게 작성할 수 있게 된다. 기존에 존재하는 Promise에 간편한 API를 제공하는 것이다. 기존에 존재하는 것 또는 기존에 존재하는 것을 감싸서 조금 더 간편하게 쓸 수 있는 API를 제공하는 것을 Syntactic Sugar이라고 한다.
(cf. 좋은예로, Class를 생각해볼 수 있다. Class는 Prototype을 base로 한 syntactic sugar이다.)

// async & await 기본 문법

async function 함수명() {           // 함수 앞에 async라는 예약어 붙이기
  await 비동기_처리_메서드_명();      // 비동기 처리 코드 앞에 await 붙이기
}

// promise 객체를 활용한 async / await

function fetchItems() {
  return new Promise(function(resolve, reject) {
    let items = [1,2,3];
    resolve(items)
  });
}
// fetchItems() 함수는 프로미스 객체를 반환하는 함수.
// fetchItems() 함수를 실행하면 프로미스가 이행(resolved)되며 결과값은 items배열이 된다


async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
}
// logItems() 함수를 실행하면 fetchItems()함수의 결과 값인 items 배열이 resultItems 변수에 담긴다
// 따라서 출력값은 [1,2,3]이 출력된다

❗ await을 사용하지 않았다면, 데이터를 받아온 시점에 콘솔을 출력할 수 있도록 
콜백함수나 .then() 등을 사용해야 하지만, async/await 덕분에 비동기 출력이 가능하다

🐥 async/await 사용과 .then 사용 비교

• promise함수에 대해, async를 붙여서 비동기 처리를 하거나, .then을 붙여서 비동기 처리를 할 수 있다.

// promise 객체 생성
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// async 사용
async function getApple() {
    // delay()함수를 가져와서 3초를 매개변수로 넣어준다
    await delay(3000);
    return "🍎";
    // 3초 후에 사과 리턴


// .then 사용
function getApple() {
    return delay(3000)
    .then(() => "🍎");
}