Axios는 JavaScript를 위한 간편한 HTTP 클라이언트 라이브러리로, 빠르고 간단하게 API 호출을 처리할 수 있습니다. 이번 포스트에서는 Axios를 사용하여 어떻게 빠르게 API를 호출하는지 알아보겠습니다.

Axios 설치

먼저, Axios를 사용하기 위해서는 프로젝트에 Axios를 설치해야 합니다. npm을 이용하여 설치할 수 있습니다.

npm install axios

기본적인 API 호출

Axios를 설치한 후에는 아래와 같이 Axios를 임포트하여 사용할 수 있습니다.

import axios from 'axios';

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

위의 예제는 https://example.com/api/data에 GET 요청을 보내는 간단한 코드입니다. 응답은 response 객체로 받아와서 response.data를 출력하는 예제입니다. 에러가 발생하면 catch 블록이 실행되어 오류를 출력합니다.

요청에 매개변수 추가하기

API 호출 시에는 종종 매개변수를 추가해야 할 때가 있습니다. Axios는 간편하게 매개변수를 추가할 수 있는 기능을 제공합니다.

axios.get('https://example.com/api/data', {
  params: {
    id: 1,
    name: "John"
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위의 예제에서는 id와 name 매개변수를 추가하여 GET 요청을 보내고 있습니다. 이렇게 추가된 매개변수는 URL에 자동으로 추가되어 전달됩니다.

요청에 헤더(header) 추가하기

API 호출 시에 인증 토큰이나 헤더를 추가해야 할 경우가 있습니다. Axios를 사용하면 간편하게 헤더를 추가할 수 있습니다.

axios.get('https://example.com/api/data', {
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위의 예제에서는 Authorization 헤더와 Content-Type 헤더를 추가하여 GET 요청을 보내고 있습니다.

요청에 데이터(body) 추가하기

POST 요청을 보낼 때는 종종 요청 데이터를 포함해야 할 경우가 있습니다. Axios를 사용하면 간편하게 요청 데이터를 추가할 수 있습니다.

axios.post('https://example.com/api/data', {
  id: 1,
  name: "John"
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위의 예제에서는 POST 요청을 보낼 때 id와 name을 요청 데이터로 포함시키고 있습니다.

결론

Axios를 사용하면 JavaScript에서 간편하게 API 호출을 처리할 수 있습니다. 이번 포스트에서는 Axios의 기본적인 사용법을 알아보았습니다. Axios는 많은 기능과 옵션을 제공하므로, 공식 문서를 참조하여 더 자세한 사용법을 알아보시기 바랍니다.

• Axios 공식 문서: https://axios-http.com/