[typescript] fetch API를 사용한 REST API 호출

12 Dec 2023

typescript

이번 글에서는 TypeScript를 사용하여 Fetch API를 통해 REST API를 호출하는 방법에 대해 알아보겠습니다.

Fetch API란?

Fetch API는 웹 브라우저의 내장 기능으로, 네트워크를 통해 자원을 가져오는 기능을 제공합니다. 이 API를 사용하면 JavaScript나 TypeScript를 사용하여 서버로부터 데이터를 가져오거나 서버로 데이터를 전송할 수 있습니다.

REST API 호출하기

아래는 TypeScript를 사용하여 Fetch API를 통해 GET 요청을 보내는 간단한 예제입니다.

async function fetchUserInfo(userId: number) {
  try {
    const response = await fetch(`https://example.com/api/users/${userId}`, {
      method: 'GET'
    });
    if (response.ok) {
      const data = await response.json();
      console.log('User Info:', data);
    } else {
      console.error('Failed to fetch user info');
    }
  } catch (error) {
    console.error('Error fetching user info:', error);
  }
}

fetchUserInfo(123);

이 예제에서는 fetchUserInfo 함수를 정의하고, 해당 함수에서 Fetch API를 사용하여 /api/users 엔드포인트로 GET 요청을 보내고 응답을 처리합니다.

POST 요청 보내기

POST 요청을 보내는 예제도 살펴보겠습니다.

async function createNewUser(userInfo: object) {
  try {
    const response = await fetch('https://example.com/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userInfo)
    });
    if (response.ok) {
      const newUser = await response.json();
      console.log('New User:', newUser);
    } else {
      console.error('Failed to create new user');
    }
  } catch (error) {
    console.error('Error creating new user:', error);
  }
}

createNewUser({ name: 'John Doe', email: 'johndoe@example.com' });

이 예제에서는 createNewUser 함수를 정의하고, 해당 함수에서 Fetch API를 사용하여 /api/users 엔드포인트로 POST 요청을 보내고 응답을 처리합니다.

결론

이렇게 TypeScript와 Fetch API를 사용하여 RESTful한 API를 호출하는 방법에 대해 알아보았습니다. Fetch API를 사용하면 간편하게 서버와 데이터를 주고받을 수 있으며, TypeScript의 강력한 타입 시스템을 활용하여 안전하게 API를 호출할 수 있습니다.

더 자세한 내용은 Fetch API 문서를 참고하시기 바랍니다.