[JavaScript] 동기와 비동기 - 비동기③ Async&Await

Async

어떤 함수를 비동기 함수로 만들어주는 키워드
함수가 프로미스를 반환하도록 변환해주는 키워드

Await

async 함수 내부에서만 사용이 가능한 키워드
비동기 함수가 다 처리되기를 기다리는 역할

프로미스 객체 반환 함수

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`${ms} 밀리초가 지났습니다.`);
      resolve()
    }, ms);
  });
}

기존 Promise.then() 방식

function main() {
  delay(1000)
      .then(() => {
        return delay(2000);
      })
      .then(() => {
        return Promise.resolve('끝');
      })
      .then(result => {
        console.log(result);
      });
}

// 메인 함수 호출
main();

async/await 방식

async function main() {
  await delay(1000);
  await delay(2000);
  const result = await Promise.resolve('끝');
  console.log(result);
}

// 메인 함수 호출
main();

async/await 방식의 코드가 더 간결하며 가독성이 좋음

참고 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-async-await