axios

axios는 JavaScript의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. axios는 Promise를 기반으로 한 강력한 기능과 다양한 설정 옵션을 제공하여 네트워크 요청을 보다 편리하게 다룰 수 있도록 도와줍니다.

Axios 기본 구조

// 기본적인 GET 요청
axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    // 성공적인 응답 처리
    console.log(response.data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Request failed:', error);
  });
JavaScript
복사

Axios의 주요 메서드

메소드	설명
axios.get(url, config)	지정된 URL에서 데이터를 조회하는 요청을 합니다.
axios.post(url, data, config)	지정된 URL로 데이터를 전송하여 새로운 리소스를 생성합니다. data 에 요청 본문 데이터를 담는다.
axios.put(url, data, config)	지정된 URL의 리소스를 전체적으로 업데이트합니다. data 에 요청 본문 데이터를 담는다.
axios.delete(url, config)	지정된 URL의 리소스를 삭제합니다.
axios.patch(url, data, config)	지정된 URL의 리소스를 부분적으로 업데이트합니다.
axios.head(url, config)	지정된 URL의 헤더 정보를 가져옵니다.

Axios 설정 객체(config)의 주요 속성

•

url: 요청을 보낼 URL

•

method: HTTP 메서드 (GET, POST, PUT, DELETE 등)

•

params: URL에 추가할 쿼리 매개변수

•

data: 요청 본문(body)에 포함될 데이터 (POST, PUT 등에서 사용)

•

headers: 요청 헤더 설정

•

timeout: 요청이 얼마나 길어질 수 있는지 설정

Axios의 반환값

axios 메서드는 Promise를 반환합니다. 이 Promise는 성공적인 응답일 경우 response 객체를 resolve하고, 오류가 발생한 경우 error 객체를 reject합니다.

모듈이 설치되어 있어야한다.

npm install axios
JavaScript
복사

예시 코드 - get

// axios 라이브러리 가져오기
const axios = require('axios');

// GET 요청 보내기
axios.get('https://httpbin.org/get')
  .then(response => {
    // 성공적인 응답 처리
    console.log(response.data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Request failed:', error);
  });
JavaScript
복사

예시 코드 - post

const axios = require('axios')
const url = 'https://httpbin.org/post'
const data = {
    name : '김조은',
    age : 25
}
const headers = {
    'ContentType' : 'application/json'
}

// axios POST 요청
axios.post(url, data, headers) 
    .then(response => {
        console.log(`data : ${response.data}`);
        // ⭐ console.dir(객체)
        // : 객체를 펼쳐서 로그를 출력해준다.
        console.dir(response.data);
    })
    .catch(error => {
        console.log(`error : ${error}`);
    })
JavaScript
복사