[typescript] async/await와 함께 사용할 수 있는 다른 비동기 패턴

08 Dec 2023

typescript

비동기 프로그래밍은 JavaScript 및 TypeScript와 같은 언어에서 매우 일반적입니다. 이 문서에서는 TypeScript의 async/await와 함께 사용할 수 있는 다양한 비동기 패턴을 살펴보겠습니다.

Promise와 async/await

비동기 코드를 작성할 때 가장 많이 사용되는 패턴 중 하나는 Promise입니다. async/await는 이러한 Promise 기반의 비동기 코드를 더욱 쉽게 작성할 수 있게 하는 기능입니다.

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

Parallel Promise 처리하기

여러 개의 Promise를 병렬로 처리하고, 모든 작업이 완료될 때까지 기다리려면 Promise.all 메서드를 사용할 수 있습니다.

async function fetchAndProcessData() {
  const [userData, productData] = await Promise.all([
    fetch('https://api.example.com/users'),
    fetch('https://api.example.com/products')
  ]);
  // 데이터 처리 로직
}

Sequential한 Promise 처리하기

여러 개의 Promise를 순차적으로 처리하려면 for...of 루프와 async/await를 활용할 수 있습니다.

const urls = ['one', 'two', 'three'];
async function fetchSequentially() {
  for (const url of urls) {
    const response = await fetch(`https://api.example.com/${url}`);
    // 데이터 처리 로직
  }
}

비동기 코드 예외 처리

try...catch 블록을 사용하여 async/await를 통해 발생하는 예외를 처리할 수 있습니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.log('Error fetching data:', error);
  }
}

요약

이 문서에서는 TypeScript의 async/await와 함께 사용할 수 있는 Promise 기반의 다양한 비동기 패턴에 대해 알아보았습니다. 이러한 패턴을 적절히 활용하여 코드를 더욱 간결하고 가독성 있게 작성할 수 있습니다.

더 많은 정보는 MDN web docs - async/await를 참고하세요.