[typescript] REST API 호출 시 동기 처리 방법

12 Dec 2023

typescript

웹 애플리케이션을 개발하다 보면 RESTful API를 호출할 때 응답을 기다려야 하는 상황이 있습니다. TypeScript에서는 이를 위해 여러 가지 방법을 제공하고 있습니다. 이번 포스트에서는 async/await를 사용하여 REST API 호출을 동기적으로 처리하는 방법에 대해 알아보겠습니다.

1. async/await 사용하기

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

fetchData();

async 키워드를 사용하여 함수를 비동기 함수로 선언하고, await 키워드를 사용하여 Promise를 기다립니다. 이를 통해 코드를 동기적으로 작성할 수 있습니다.

2. Promise 활용하기

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

fetchData();

async/await 대신에 Promise를 직접 다룰 수도 있습니다. 위의 코드는 fetch를 통해 데이터를 받아올 때 Promise를 사용하여 처리하는 예제입니다.

이와 같이 TypeScript를 사용하여 REST API 호출을 동기적으로 처리하는 방법에 대해 알아보았습니다. 이러한 방식을 통해 코드를 보다 깔끔하게 작성하고, 오류를 더 쉽게 관리할 수 있습니다.

많은 백엔드 서버에서는 비동기 처리를 사용하기 때문에, 프론트엔드에서도 이에 맞춰 비동기로 처리하는 것이 좋습니다. 하지만 때에 따라 동기 처리가 필요한 경우를 위해 위의 방법을 활용할 수 있습니다.

1. async/await 사용하기

2. Promise 활용하기

참고 자료