[typescript] 타입스크립트에서 `.then()` 메소드를 사용하여 비동기 작업을 처리했을 때 코드 가독성을 높이려면 어떻게 해야 하나요?

15 Dec 2023

typescript

async/await를 사용하면 비동기 코드를 돍읽기 쉽고 직관적으로 만들 수 있습니다. .then() 메소드 대신 async/await 구문을 사용하면 코드 블록이 더 명확해지고, 비동기 처리에 대한 예외 처리가 더 쉬워집니다.

예를 들어, 다음과 같이 .then() 메소드를 사용한 코드:

fetchData()
  .then((data) => {
    console.log(data);
    return fetchMoreData();
  })
  .then((moreData) => {
    console.log(moreData);
  })
  .catch((error) => {
    console.error(error);
  });

async/await를 활용하여 다음과 같이 변경할 수 있습니다:

try {
  const data = await fetchData();
  console.log(data);
  const moreData = await fetchMoreData();
  console.log(moreData);
} catch (error) {
  console.error(error);
}

이렇게 하면 코드가 보다 직관적이고 가독성이 높아지며, 에러 처리도 간편해집니다. 따라서 타입스크립트에서 .then() 메소드를 사용할 때는 async/await 구문을 고려해 보는 것이 좋습니다.

자세한 내용은 다음 문서를 참고할 수 있습니다:

MDN Web Docs: async function