Axios 라이브러리 특징 및 사용법

axios는 JavaScript에서 사용되는 HTTP 클라이언트 라이브러리입니다. 이 라이브러리는 웹 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. 주로 HTTP 요청을 만들고 응답을 처리하는 데 사용됩니다.

주요 기능으로는 다음과 같은 것들이 있습니다.

1. HTTP 요청 만들기

axios를 사용하여 GET, POST, PUT, DELETE 등의 다양한 HTTP 요청을 생성할 수 있습니다.
   
2. Promise 기반 API

Axios는 Promise를 기반으로 하기 때문에 비동기적으로 HTTP 요청을 처리하고 응답을 기다릴 수 있습니다. 이는 `.then()` 및 `.catch()`를 사용하여 응답을 처리할 수 있음을 의미합니다.

3. HTTP 요청과 응답의 가독성 높이기

Axios는 요청과 응답 데이터를 JSON 형식으로 자동으로 파싱하여 처리합니다. 또한 요청 및 응답의 설정을 구성할 수 있어서 편리합니다.

4. 인터셉터(Interceptor) 지원

Axios는 요청이나 응답을 보내기 전이나 받은 후에 작업을 추가하기 위해 인터셉터를 사용할 수 있습니다. 이를 통해 요청이나 응답의 변형, 로깅, 오류 처리 등을 수행할 수 있습니다.

간단한 예시는 아래와 같습니다.

// GET 요청 보내기
axios.get('/api/data')
  .then(response => {
    console.log('데이터:', response.data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

// POST 요청 보내기
axios.post('/api/data', { 'name': 'John', 'age': 30 })
  .then(response => {
    console.log('응답:', response.data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

// POST 요청 보내기(config 전송 방식, axios(config)) 
axios.post({
	url: '/api/data',
    method: 'post',
    data: { 'name': 'John', 'age': 30 }
})
.then(response => {
    console.log('응답:', response.data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });
  
// x-www-form-urlencoded 포맷으로 전송
const params = new URLSearchParams();
params.append('name', 'John');
params.append('age', 30);
axios.post('/api/data', params)
.then(response => {
    console.log('응답:', response.data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

 

이러한 간단한 코드를 통해 axios를 사용하여 서버에 요청을 보내고 응답을 처리할 수 있습니다.

 

참고자료

https://axios-http.com/kr/docs/intro