[typescript] REST API 호출 시 파라미터 전달 방법

12 Dec 2023

typescript

이번에는 TypeScript를 사용하여 RESTful API를 호출하고, 해당 호출 시에 필요한 파라미터를 전달하는 방법에 대해 알아보겠습니다.

1. Query 파라미터 전달

REST API 호출 시에 query 파라미터를 전달하는 방법은 매우 간단합니다. fetch 함수를 예를 들어 살펴보겠습니다.

const url = 'https://example.com/api/data?key1=value1&key2=value2';
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data));

위 예제에서 fetch 함수를 사용하여 API를 호출할 때, URL에 query 파라미터를 포함하여 호출하였습니다.

2. Body에 JSON 데이터 전달

REST API 호출 시에 JSON 형식의 데이터를 body에 전달하는 방법은 fetch 함수를 이용하여 아래와 같이 처리할 수 있습니다.

const url = 'https://example.com/api/data';
const data = {
  key1: 'value1',
  key2: 'value2'
};
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => console.log(data));

위 예제에서는 fetch 함수를 사용하여 POST 요청을 보내는데, 이때 body 속성에 JSON.stringify를 사용하여 JSON 데이터를 문자열로 변환하여 보냈습니다.

3. 라이브러리 사용

REST API 호출 시에 파라미터를 전달하는 것을 보다 쉽게 처리해주는 라이브러리들도 많이 존재합니다. 예를 들어 axios나 fetch의 래퍼 역할을 하는 node-fetch 등이 있습니다.

import axios from 'axios';

const parameters = {
  key1: 'value1',
  key2: 'value2'
};
axios.get('https://example.com/api/data', { params: parameters })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

axios를 이용하면, fetch와 비슷한 방식으로 API 호출 및 파라미터 전달이 가능합니다.

이렇게 TypeScript에서 REST API를 호출하고 파라미터를 전달하는 방법을 학습해보았습니다.

참고 자료: