Axios는 자바스크립트를 사용하여 클라이언트 측에서 HTTP 요청을 처리하는 데 도움을 주는 인기있는 라이브러리입니다. 이 포스트에서는 Axios를 사용하여 클라이언트 측에서 데이터 관련 이벤트를 처리하는 방법을 알아보겠습니다.

Axios란?

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, Ajax 요청을 쉽게 처리할 수 있도록 지원합니다. 여러 가지 기능을 제공하며, 간단하고 직관적인 API로 인기를 끌고 있습니다.

데이터 가져오기

Axios를 사용하여 데이터를 가져오는 것은 매우 간단합니다. 다음은 GET 요청을 보내고 응답을 처리하는 예시 코드입니다.

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    // 응답 데이터 처리
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위의 코드에서는 /api/data에 GET 요청을 보내고, 응답이 성공한 경우 response.data에서 데이터를 확인합니다. 에러가 발생한 경우에는 catch 블록에서 에러를 처리합니다.

데이터 전송하기

Axios를 사용하여 데이터를 전송하는 것도 간단합니다. 다음은 POST 요청을 보내고 응답을 처리하는 예시 코드입니다.

import axios from 'axios';

const data = {
  name: 'John Doe',
  email: 'john@example.com'
};

axios.post('/api/data', data)
  .then(response => {
    // 응답 데이터 처리
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위의 코드에서는 /api/data에 POST 요청을 보내고, data 객체를 함께 전송합니다. 응답이 성공한 경우에는 response.data에서 데이터를 확인할 수 있습니다.

요청 설정하기

Axios는 다양한 요청 설정 옵션을 제공합니다. 예를 들어, 요청 헤더를 설정하거나 요청 시간 초과 값을 조정할 수 있습니다. 다음은 몇 가지 예제입니다.

import axios from 'axios';

axios.get('/api/data', {
  headers: {
    Authorization: 'Bearer your-token'
  }
})
  .then(response => {
    // 응답 데이터 처리
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

axios.post('/api/data', {
  name: 'John Doe',
  email: 'john@example.com'
}, {
  timeout: 5000
})
  .then(response => {
    // 응답 데이터 처리
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위의 코드에서는 GET 요청에 Authorization 헤더를 설정하고, POST 요청에는 5초 동안의 요청 시간 초과 값을 설정합니다.

Axios의 모든 설정 옵션에 대한 자세한 내용은 공식 문서를 참조하십시오.

마무리

이번 포스트에서는 Axios를 사용하여 클라이언트 측에서 데이터 관련 이벤트를 처리하는 방법을 살펴보았습니다. Axios는 간편하게 HTTP 요청을 처리할 수 있는 라이브러리로, 실무에서 널리 사용되고 있습니다. 자세한 내용은 Axios 공식 웹사이트에서 확인할 수 있으니 참고하시기 바랍니다.

#axios #자바스크립트