Axios는 JavaScript에서 많이 사용되는 HTTP 통신 라이브러리입니다. 이를 사용하여 서버로부터 데이터를 가져오는 것은 간단하고 효율적입니다. 이 문서에서는 Axios를 사용하여 서버로부터 응답 데이터를 가져오는 방법에 대해 알아보겠습니다.

Axios 라이브러리 설치

먼저, Axios 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 npm으로 Axios를 설치합니다.

npm install axios

GET 요청 보내기

Axios를 사용하여 GET 요청을 보내고 응답 데이터를 받아오는 방법은 다음과 같습니다.

const axios = require('axios');

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

위의 예제에서는 axios.get() 메서드를 사용하여 서버에 GET 요청을 보내고, 응답을 처리하기 위해 Promise 기반의 .then() 메서드와 .catch() 메서드를 사용합니다. 응답 데이터는 response.data 속성에 담겨 있습니다.

POST 요청 보내기

Axios를 사용하여 POST 요청을 보내는 방법은 다음과 같습니다.

const axios = require('axios');

axios.post('https://api.example.com/data', {
    name: 'John Doe',
    age: 25
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

POST 요청을 보낼 때는 axios.post() 메서드를 사용하고, 두 번째 인자로 전송할 데이터를 객체 형태로 전달합니다. 위의 예제에서는 { name: 'John Doe', age: 25 } 객체를 전송하고 있습니다.

추가 설정 및 인터셉터

Axios를 사용하여 요청을 보낼 때 추가적으로 설정을 할 수 있습니다. 예를 들어, 요청에 헤더나 인증 정보를 추가하거나 요청 시간을 설정할 수 있습니다. 자세한 내용은 Axios 공식 문서를 참조하시기 바랍니다.

또한, Axios는 인터셉터(Interceptor) 기능을 제공하여 요청 전송 전후에 추가적인 로직을 수행할 수 있습니다. 이를 사용하여 요청/응답 데이터를 가공하거나 특정 에러에 대한 처리를 할 수 있습니다.

결론

Axios는 간편하고 직관적인 API를 제공하여 서버로부터 데이터를 가져오는 작업을 편리하게 처리할 수 있습니다. 이 문서에서는 Axios를 사용하여 GET 및 POST 요청을 보내고 응답 데이터를 가져오는 예제를 살펴보았습니다. 자세한 내용은 Axios 공식 문서를 참고하시기 바랍니다.

References:

• Axios 공식문서