[자바스크립트] 9. 동기, 비동기 - async & await

async & await

async

mozilla - async

• async function 선언은 하나의 비동기 함수를 정의한다.
• Promise 키워드를 사용하지 않아도 자동으로 Promise를 return한다.

async function fetchUser() {
    return 'kim';
}

const user = fetchUser();
console.log(user);

await

• async가 붙은 함수에서만 쓸 수 있다.
• async 함수의 실행을 일시 중지 → 전달 된 Promise의 해결을 기다림 → async 함수의 실행을 다시 시작하고 완료후 값을 반환

await 키워드로 인해 연관 없는 두 개 이상의 Promsie의 소요 시간이 증가할 경우 Promise 객체를 만들어서 병렬적으로 실행이 가능하다.

async function A() {
  await delay(1000);
  return 'A';
}
async function B() {
  await delay(1000);
  return 'B';
}

async function C() {
  // 아래와 같이 선언 시 연관 없는 두 Promise로 인해
  // 실행 시간 증가(1초 + 1초 = 2초)
  // const a = await A();
  // const b = await B();
  
  // 아예 Promsie 객체를 만들어서 병렬적으로 실행
  const APromise = A();
  const BPromise = B();
  const a = await APromise;
  const b = await BPromise;
  return `${a} + ${b}`;
}

C().then(console.log);
// 1초 후 'A + B' 출력