[JS] Async 이해하기

async 함수는 함수 안의 await 구문과 함께 비동기 작업을 제어합니다. await 키워드는 반드시 async 함수 안에서만 유효합니다.

async 함수의 동작 방식은 다음과 같습니다. 처음 async 함수가 호출되어 await 키워드가 있는 비동기 작업(promise 객체)이 실행되면, 해당 비동기 함수는 이벤트 루프를 통해 비동기로 작업을 처리합니다. 그동안 async 함수는 이러한 비동기 작업이 완료될 때까지 일시 중지 상태로 비동기 작업(promise 객체)의 해결(resolve)을 기다립니다. 이 작업이 완료되면 async 함수가 다시 실행되고 함수 결과를 반환합니다.

async 함수를 선언하는 방법에는 async 함수 선언문(async function)과 표현식(async function expression)이 있습니다. 다만 async 함수는 function 선언 앞에 async 키워드가 붙습니다.

1  function doJob(name, person) {
2   return new Promise((resolve, reject) => {
3     setTimeout(() = {
4       if(person.stamina>50) {
5         person.stamina -= 30;
6         resolve({
7           result: `${name} success`
8         });
9       } else {
10        reject(new Error(`${name} failed`));
11      }
12    }, 1000);
13  });
14 };
15
16 const harin = {stamina: 100};
17
18 const execute=async function() {
19   try {
20    let v = await doJob('work', harin);
21    console.log(v.result);
22    v = await doJob('study', harin);
23    console.log(v.result);
24    v = await doJob ('work', harin);
25    console.log(v.result);
26    V = await doJob('study', harin);
27  } catch(e) {
28    console.log(e);
29  }
30 }
31
32 execute();

1~14라인

Job 이름과 스테미나(stamina)를 속성으로 갖는 객체를 매개변수로 전달받습니다. Promise 객체를 생성하는 함수를 정의합니다. 이 Promise 객체는 setTimeout을 사용하여 함수 호출로부터 1초 뒤에 로직을 처리 하도록 약속합니다. 이때 스테미나가 50보다 많으면 30을 차감하고 Promise를 성공으로 처리하지만, 만일 스테미나가 50 이하면 약속은 거부됩니다.

16라인

스테미나 값을 100을 가지는 객체를 정의합니다.

18라인

async 함수를 표현식으로 정의합니다. 표현식 익명함수 function 앞에 async를 추가하여, execute 함수 내부에 비동기 작업을 제어합니다.

19~30라인

비동기로 처리되는 doJob 함수를 연달아 호출합니다. 비동기 로직 앞에 await 키워드를 추가하면, 비동기 작업이 끝날 때까지 기다렸다가 다음 문장 코드를 처리합니다. 따라서 17~20 라인 이 순서대로 실행될 것으로 보입니다.

20~23라인

스테미나 값이 50 이상이기 때문에, 1초 간격 순차적으로 에러 없이 처리됩니다.

24라인

스테미나 값이 50 이하가 되어 new Error('work failed) 에러를 반환합니다.

27~29라인

에러 발생 시 try-catch 메소드를 통해 전달한 함수가 호출되어 거절된 이유인 에러 객체가 콘솔에 에러로 출력됩니다.

32라인

execute 함수를 호출합니다.

위 코드를 크롬 콘솔에서 확인하면 다음과 같습니다.

//결과
work success
study success
Error: work failed