[JS] async 함수가 await를 만났을 때 동작 흐름

TL;DR

---

async/await는 비동기 코드를 동기 코드처럼 작성할 수 있도록 해주는 문법적 설탕(Syntax Sugar)이다. 내부적으로는 async 함수 실행을 일시 중단했다가 프로미스가 처리되면 마이크로태스크 큐를 통해 다시 재개 하는 방식으로 논블로킹을 유지한다.

 

async/await는 함수 실행을 중단/재개할 수 있는 제너레이터와 프로미스를 활용해서 구현되어 있으며, await 이후의 코드는 사실상 .then() 메서드의 콜백 함수라고 볼 수 있다.

promise.then(() => { /* await 이후의 코드 */ })

 

 

async/await 내부 메커니즘

---

1. async 함수를 호출하면 await 키워드를 만나기 전까지 일반 함수처럼 동기적으로 실행
2. async 함수 실행 중 await 키워드를 만나면 해당 지점에서 함수 실행을 일시 중지하고, 호출자에게 제어권 반환. 백그라운드에선 Promise 처리 시작.
3. async 함수가 일시 중지(suspend)된 동안 JS 런타임은 호출자 컨텍스트의 다음 동기 코드 계속 실행. 덕분에 메인 스레드가 블로킹되지 않고, UI 렌더링 같은 다른 작업을 지연 없이 처리할 수 있음.
4. 프로미스가 처리(이행 혹은 거부)되면, 중단 지점 이후의 코드가 마이크로태스크 큐에 추가되고, 이벤트 루프에 의해 콜스택에 들어가서 실행 재개. 이때 await 표현식은 이행된 값을 반환하며, 거부된 경우 예외 throw.
5. 나머지 동기 코드 실행. async 함수 안에 또 다른 await를 만나면 2-4 과정 반복.

 

 

async/await 실행 흐름 예제

---

function main() {
  // Promise 생성자가 받는 executor 함수 자체는 동기적으로 실행됨
  return new Promise((resolve) => {
    console.log(3);
    resolve(4);
    console.log(5);
  });
}

async function f() {
  console.log(2);
  let r = await main(); // 여기서 f() 실행 일시 중단
  console.log(r); // main() 프로미스 처리 후 실행
}

console.log(1);
f();
console.log(6);

// 1, 2, 3, 5, 6, 4

 

1. console.log(1) : 전역 스코프의 동기적 코드 실행
2. f() 함수 호출
   • console.log(2) : 함수 내부의 동기적 코드 실행
   • main() 함수 호출
     • console.log(3) : 실행자 함수 내부의 동기적 코드 실행
     • resolve(4) : 프로미스를 이행(fulfilled) 상태로 변경 → 이 시점에 await로 대기중인 f() 함수의 나머지 부분이 마이크로태스크 큐에 등록됨
     • console.log(5) : 실행자 함수 내부의 동기적 코드 실행
     • main() 함수는 이행된 상태의 프로미스 반환
   • main() 함수가 반환한 프로미스를 확인하고, f() 함수 실행 일시 중단 및 전역 스코프로 제어권 반환
3. console.log(6) : 전역 스코프의 동기적 코드 실행
4. f() 함수의 나머지 코드 실행 → 콜스택이 비어있는걸 확인한 이벤트 루프가 마이크로태스크 큐의 작업을 콜스택에 추가함
   • await 표현식에서 프로미스 결과값 4 반환
   • console.log(4) : 함수 내부의 동기적 코드 실행

 

위 코드의 비동기 처리 과정을 시퀀스 다이어그램으로 표현해보면 아래와 같다.