[typescript] 비동기 함수와 async/await 키워드의 활용

14 Dec 2023

typescript

TypeScript는 JavaScript 코드를 보다 안정적이고 확장 가능하게 작성할 수 있도록 도와주는 강력한 도구입니다. 특히 비동기 코드를 다룰 때 async/await 키워드는 매우 유용한데, 이를 활용하는 방법에 대해 알아보겠습니다.

비동기 함수 작성

우선 비동기 함수는 async 키워드를 사용하여 작성합니다. 이렇게 하면 해당 함수는 항상 Promise를 반환하게 됩니다. 아래는 간단한 예제입니다.

async function fetchData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    // 결과가 나왔을 때 resolve 호출
    // 에러 발생 시 reject 호출
  });
}

async/await 키워드 사용

이제 async 함수 내에서 비동기 작업을 수행하는 부분을 await 키워드를 통해 간단하게 처리할 수 있습니다. 아래는 fetchData 함수를 호출하고 결과를 다루는 예제입니다.

async function handleData() {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

에러 처리

async/await는 try/catch 블록을 통해 에러를 처리할 수 있어 코드의 가독성을 높여줍니다. 비동기 작업 중 발생한 에러를 간편하게 처리할 수 있습니다.

결론

TypeScript에서의 비동기 작업을 처리할 때 async/await 키워드는 코드를 깔끔하고 읽기 쉽게 만들어줍니다. 이에 익숙해지면 복잡한 비동기 코드도 쉽게 다룰 수 있을 것입니다.

이렇게 TypeScript에서의 async/await 키워드를 활용하는 방법에 대해 알아보았습니다. 이러한 기능을 통해 안전하고 효율적으로 비동기 코드를 다룰 수 있게 되었습니다.

참고 문헌:

Microsoft. “Asynchronous Functions.” TypeScript, https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#async-functions (액세스일: 2021년 9월 12일)