REST API를 호출할 때 쿼리 파라미터를 사용하는 방법에 대해 알아보겠습니다.

Axios를 사용한 예제

Axios는 HTTP 클라이언트 라이브러리로 REST API를 호출하는 데 유용합니다. 아래는 TypeScript에서 Axios를 사용하여 쿼리 파라미터를 포함한 REST API를 호출하는 예제입니다.

import axios, { AxiosResponse } from 'axios';

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUsersByRole(role: string): Promise<User[]> {
  const response: AxiosResponse<User[]> = await axios.get('https://example.com/api/users', {
    params: {
      role: role,
    },
  });
  return response.data;
}

위 예제에서는 fetchUsersByRole 함수를 통해 role 파라미터를 쿼리로 넘겨서 해당 역할에 속한 사용자들을 가져오는 예제입니다. Axios의 get 메서드를 사용할 때 두 번째 인자로 params 객체에 쿼리 파라미터를 넣어주면 됩니다.

Fetch API를 사용한 예제

Fetch API는 최신 웹 표준이며, 브라우저에서 기본 제공됩니다. 아래는 TypeScript에서 Fetch API를 사용하여 쿼리 파라미터를 포함한 REST API를 호출하는 예제입니다.

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUsersByRole(role: string): Promise<User[]> {
  const response = await fetch(`https://example.com/api/users?role=${role}`);
  if (!response.ok) {
    throw new Error('Failed to fetch users');
  }
  return response.json();
}

위 예제에서는 fetchUsersByRole 함수를 통해 role 파라미터를 쿼리로 넘겨서 해당 역할에 속한 사용자들을 가져오는 예제입니다. fetch 함수의 첫 번째 인자로 URL에 쿼리 파라미터를 포함하여 호출하면 됩니다.

위 예제에서는 fetch 함수를 사용했지만, Axios를 이용한 방법과 동일한 방식으로 fetch 함수를 사용하여 쿼리 파라미터를 전달할 수 있습니다.

REST API를 호출할 때 쿼리 파라미터를 사용하는 방법에 대해 간단히 살펴보았습니다.

자세한 내용은 아래 문서를 참고할 수 있습니다.

• Axios 공식 문서
• Fetch API 공식 문서