axios

axios란

axios는 JavaScript 및 Node.js에서 HTTP 요청을 만들고 처리하기 위한 강력하고 사용하기 쉬운 라이브러리 이는 브라우저 환경 및 Node.js 환경에서 모두 사용할 수 있어서 클라이언트 측 또는 서버 측에서 모두 사용할 수 있다.

주요특징

1. axios는 비동기 작업을 처리하기 위해 Promise를 사용한다. 따라서 .then() 및 .catch()와 같은 Promise 메소드를 사용하여 응답을 처리할 수 있다.
2. 클라이언트 측 브라우저 또는 서버 측 Node.js 환경에서 모두 사용할 수 있다.
3. 요청 및 응답 데이터를 자동으로 변환할 수 있어, JSON 데이터를 자바스크립트 객체로 변환하거나 반대로 수행할 수 있다.
4. 다양한 HTTP 요청 설정을 제공하여 요청 헤더, 요청 방법, 시간 초과 등을 쉽게 구성할 수 있다.

사용법

1. 설치

npm install axios

또는 yarn을 사용하는 경우

yarn add axios

2. 사용

import axios from 'axios';

axios를 사용하여 HTTP 요청을 보내려면 먼저 axios 라이브러리를 가져와야 한다.

3. GET 요청

axios.get('https://api.example.com/data')
  .then(response => {
    // 성공적으로 받은 응답 데이터
    console.log(response.data);
  })
  .catch(error => {
    // 요청이 실패하거나 응답이 에러 상태 코드를 가지면 실행
    console.error(error);
  });

4. POST 요청

const postData = {
  key1: 'value1',
  key2: 'value2'
};

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

데이터를 서버로 보내려면 POST 요청을 사용할 수 있다.

5. 기타 설정 및 기능

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  },
  timeout: 5000 // 5초 이내에 응답이 없으면 에러 처리
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

axios는 다양한 설정 및 기능을 제공하는데 예를 들어, 헤더 설정, 시간 초과 설정, 요청 및 응답 변환 등이 있다. 이러한 설정은 config 객체를 사용하여 구성할 수 있다.

참고한 곳

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