Section 14. 자바스크립트 async & await

async 함수

• 프로미스를 기반으로 동작한다.
• 마치 동기 코드처럼 직관적으로 코딩을 할 수 있다.

function getMult10Promise (number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(number * 10);
    }, 1000);
  });
}

async function doAsyncWorks () {
  const result1 = await getMult10Promise(1);
  console.log(result1);

  const result2 = await getMult10Promise(2);
  console.log(result2);

  const result3 = await getMult10Promise(3);
  console.log(result3);
}

doAsyncWorks();
console.log('💡 이 문구가 먼저 출력됨');

함수앞에 async가 있는 함수는 일반 함수처럼 작동하는 것이 아니라 내부의 작업들이 비동기적으로 작동한다.

처음 출력문을 보면 getMult10Promise(1) 즉, 숫자에 10을 곱한 값을 반환하는 프로미스를 만드는 함수를 실행한다. 

그런데 앞에 선언된 await 때문에 일반적인 자바스크립트의 비동기 작업과는 달리 이 함수의 작업이 다 끝날때까지 코드의 진행이 멈춘다. 

때문에 출력문이 10, 20, 30 순으로 1초가 지날 때마다 출력된 것을 알 수 있다.

그리고 '이 문구가 먼저 출력됨' 이 먼저 출력이 되는데 doAsynWorks는 어디까지나 비동기 함수이기 때문에 문구가 먼저 출력된 것을 확인 할 수 있다. 

 

정리하자면 다음과 같다

• await - 코드의 진행을 멈추고 프로미스로부터 답을 받아낸다.
• await 은 async 함수 또는 모듈 내에서만 사용 가능하다.

릴레이 코드에 async 와 await을 적용해 보면 다음과 같다.

const DEADLINE = 1400;

function getRelayPromise (name, start, failMsg) {
  console.log(`👟 ${name} 출발`);

  // 💡 랜덤 시간만큼 달리고 결과를 반환하겠다는 약속을 만들어 반환
  return new Promise((resolve, reject) => {
    const time = 1000 + Math.random() * 500;

    setTimeout(() => {
      if (time < DEADLINE) {
        console.log(`🚩 ${name} 도착 - ${(start + time)/1000}초`);
        resolve(start + time);

      } else {
        console.log(failMsg);
        reject((start + time) / 1000);
      }
    }, time);
  })
}

async function relay5 () {
  try {
    const time1
     = await getRelayPromise('철수', 0, '철수부터 광탈입니다. ㅠㅠ');

    const time2
     = await getRelayPromise('영희', time1, '영희가 완주하지 못했네요.');

    const time3
     = await getRelayPromise('돌준', time2, '돌준이 분발해라.');

    const time4
     = await getRelayPromise('정아', time3, '정아에게 무리였나보네요.');

    const time5
     = await getRelayPromise('길돈', time4, '아아, 아깝습니다...');

  } catch (msg) {
    console.log(`😢 완주 실패 - ${msg}초`);
  } finally {
    console.log('- - 경기 종료 - -');
  }
}

relay5();

awiat을 사용하여 마치 동기 코드처럼 직관적으로 코드를 작성할 수 있다.