TypeScript 및 JavaScript에서 async 및 await 키워드는 비동기 작업을 보다 간단하게 다룰 수 있게 해줍니다. 이 포스트에서는 async와 await의 작동 원리를 자세히 살펴보겠습니다.

async 함수

async 키워드를 사용하여 함수를 선언하면 해당 함수는 항상 프라미스를 반환 합니다. 비동기 작업을 수행하는 함수 내에서 await 키워드를 사용하여 다른 프라미스를 기다리면, 해당 함수의 실행은 중단되고 해당 프라미스가 처리될 때까지 기다립니다.

async function getData() {
  let result = await fetch('https://api.example.com/data');
  return result.json();
}

위 코드에서 fetch 함수는 프라미스를 반환하고, await는 해당 프라미스가 처리될 때까지 getData 함수의 실행을 일시 중지합니다.

await 키워드

await 키워드는 오직 async 함수 내에서만 사용될 수 있습니다. await 키워드를 사용하여 프라미스가 처리될 때까지 기다리면서 동시에 기타 작업을 수행할 수 있습니다.

async function fetchData() {
  let result1 = await fetch('https://api.example.com/data1');
  let result2 = await fetch('https://api.example.com/data2');
  // 기타 작업
  return [result1.json(), result2.json()];
}

fetchData 함수에서 result1과 result2의 처리를 기다리는 동안 다른 작업을 수행할 수 있습니다.

결론

async와 await는 비동기 작업을 좀 더 직관적이고 쉽게 다룰 수 있게 해줍니다. 이 두 키워드를 올바르게 활용하여 프로그램을 보다 효율적으로 작성할 수 있습니다.

참고:

• MDN Web Docs
• TypeScript 공식 문서