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

12 Dec 2023

typescript

이 포스트에서는 TypeScript를 사용하여 REST API를 호출하고 데이터를 비동기적으로 처리하는 방법에 대해 알아보겠습니다.

Axios를 사용한 REST API 호출

Axios는 REST API 호출을 쉽게 만들어주는 라이브러리로, TypeScript에서도 널리 사용됩니다. Axios를 사용하여 REST API를 호출하고 응답을 처리하는 방법은 다음과 같습니다.

import axios from 'axios';

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

fetchData();

위의 예제에서는 axios.get 메서드를 사용하여 서버에서 데이터를 가져오고, async/await를 사용하여 비동기적으로 데이터를 처리합니다. 또한 try/catch 문을 사용하여 오류를 처리합니다.

Fetch API를 사용한 REST API 호출

Fetch API는 최신 웹 표준으로, 브라우저에 내장되어 있어 별도의 라이브러리를 설치할 필요가 없습니다. TypeScript에서 Fetch API를 사용하여 REST API를 호출하고 응답을 처리하는 방법은 다음과 같습니다.

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

fetchData();

위의 예제에서는 fetch 함수를 사용하여 서버에서 데이터를 가져오고, async/await를 사용하여 비동기적으로 데이터를 처리합니다. 또한 try/catch 문을 사용하여 오류를 처리합니다.

결론

이 포스트에서는 TypeScript에서 Axios와 Fetch API를 사용하여 REST API를 호출하는 방법에 대해 알아보았습니다. 두 방법 모두 비동기 처리를 위해 async/await를 사용하고, 오류 처리를 위해 try/catch 문을 사용하는 것이 좋습니다. REST API 호출 시에는 네트워크 지연이 발생할 수 있으므로 비동기 처리와 오류 처리를 잘 다루는 것이 중요합니다.

참고문헌:

관련 내용: TypeScript에서 async/await 사용하기