[typescript] REST API 호출 시 요청 헤더 설정 방법

12 Dec 2023

typescript

이번 블로그에서는 TypeScript를 사용하여 REST API를 호출하고 요청 헤더를 설정하는 방법에 대해 알아보겠습니다.

Axios를 사용한 예제

Axios는 HTTP 클라이언트 라이브러리로, TypeScript로 REST API를 호출할 때 많이 사용됩니다. Axios를 사용하여 요청 헤더를 설정하는 방법은 아래와 같습니다.

import axios, { AxiosRequestConfig } from 'axios';

const config: AxiosRequestConfig = {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer <your-token>'
  }
};

axios.get('https://api.example.com/data', config)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위 예제에서 config 객체를 생성하여 headers 속성에 원하는 헤더를 설정한 후, Axios의 HTTP 메서드(여기서는 get) 호출 시 두 번째 인자로 전달하면 해당 헤더가 요청에 포함됩니다.

Fetch API를 사용한 예제

Fetch API를 사용하여 REST API를 호출할 때도 요청 헤더를 설정할 수 있습니다.

const url = 'https://api.example.com/data';
const options: RequestInit = {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer <your-token>'
  }
};

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위 예제에서 options 객체를 생성하여 headers 속성에 원하는 헤더를 설정한 후, fetch 함수 호출 시 두 번째 인자로 전달하면 해당 헤더가 요청에 포함됩니다.

이상으로 TypeScript에서 REST API 호출 시 요청 헤더를 설정하는 방법에 대해 알아보았습니다.

혹시 REST API에 따라서는 추가적인 설정이 필요할 수 있으니, 해당 API의 문서를 참고하시기 바랍니다.