[typescript] async 함수의 실행 컨텍스트 관리

08 Dec 2023

typescript

웹 개발을 하다보면 비동기적인 작업을 수행해야 하는 경우가 많습니다. 이때 Promise나 async/await를 사용하여 비동기 코드를 더 쉽게 작성할 수 있습니다. 하지만 async 함수의 실행 컨텍스트 관리에 대해 이해하고 있다면 더 효율적인 코드를 작성할 수 있습니다. 이번 포스트에서는 async 함수의 실행 컨텍스트를 관리하는 방법에 대해 알아보겠습니다.

1. async 함수란?

async 함수는 비동기 작업을 수행하는 함수로, 내부에 await 키워드를 사용하여 Promise의 처리를 기다릴 수 있습니다.

예를 들어, 다음은 async 함수의 간단한 예시입니다.

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

2. async 함수의 실행 컨텍스트 관리 방법

2.1. Promise chaining

async 함수 내부에서 여러 개의 비동기 작업을 연달아 처리해야 하는 경우, Promise chaining을 사용할 수 있습니다.

async function fetchAndProcessData() {
  let rawData = await fetch('https://api.example.com/data');
  let processedData = await processData(rawData);
  return processedData;
}

2.2. Promise.all

여러 개의 비동기 작업을 병렬로 처리해야 하는 경우, Promise.all을 사용하여 여러 Promise를 동시에 실행하고 그 결과를 기다릴 수 있습니다.

async function fetchAndProcessData() {
  let [data1, data2] = await Promise.all([fetch('https://api.example.com/data1'), fetch('https://api.example.com/data2')]);
  return processData(data1, data2);
}

2.3. 에러 처리

async 함수 내에서 에러가 발생한 경우, try/catch 문을 사용하여 에러를 처리할 수 있습니다.

async function fetchData() {
  try {
    let data = await fetch('https://api.example.com/data');
    return data.json();
  } catch (error) {
    console.error('에러 발생: ', error);
  }
}

결론

async 함수를 사용하여 비동기 작업을 처리할 때는 Promise chaining, Promise.all, 그리고 에러 처리에 유의해야 합니다. 이를 효율적으로 활용함으로써 코드의 가독성과 안정성을 높일 수 있습니다.

참고자료: