[typescript] 비동기 작업의 결과를 활용하는 다양한 방법

14 Dec 2023

typescript

TypeScript에서 비동기 작업을 수행할 때, 작업 결과를 다양한 방법으로 활용할 수 있습니다. 이 포스트에서는 Promise, async/await를 이용하여 비동기 작업의 결과를 다루는 방법에 대해 알아보겠습니다.

1. Promise 활용

Promise는 JavaScript에서 비동기 작업을 다루는 데 사용되는 객체입니다. TypeScript에서는 Promise 객체를 이용하여 비동기 작업의 결과를 처리할 수 있습니다.

function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (/* 작업 성공 */) {
      resolve("Data fetched successfully");
    } else {
      reject("Failed to fetch data");
    }
  });
}

fetchData()
  .then((data) => {
    console.log("Received data:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

위 예시에서 fetchData 함수는 Promise 객체를 반환하며, then과 catch를 사용하여 작업의 성공 또는 실패에 대해 처리할 수 있습니다.

2. async/await 활용

async/await는 Promise 기반의 비동기 작업을 보다 간편하게 다룰 수 있는 기능입니다. TypeScript에서는 async 함수와 await 키워드를 사용하여 비동기 작업을 처리할 수 있습니다.

async function fetchData(): Promise<string> {
  // 비동기 작업 수행
  if (/* 작업 성공 */) {
    return "Data fetched successfully";
  } else {
    throw new Error("Failed to fetch data");
  }
}

async function handleData() {
  try {
    const data = await fetchData();
    console.log("Received data:", data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

handleData();

위 예시에서 fetchData 함수는 async 함수로 선언되어 있으며, await 키워드를 통해 작업의 결과를 기다린 후 처리할 수 있습니다.

결론

TypeScript에서는 Promise와 async/await을 활용하여 비동기 작업의 결과를 다룰 수 있습니다. 이를 통해 코드를 보다 간결하고 가독성 있게 작성할 수 있으며, 에러 처리도 효과적으로 수행할 수 있습니다.

참고 문헌: