Axios를 만나다✨

Yoonmin·2024년 12월 13일

javascript

목록 보기

3/3

✅ Axios란?

Axios는 Node.js, 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.

쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다.

이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 쓰게됩니다.

✅ Axios 특징

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 생성
Node.js를 위해 http 요청 생성
Promise(ES6) API 지원(async,await)
요청과 응답 데이터의 변형, 인터셉트
HTTP 요청 취소
HTTP 요청과 응답을 JSON 형태로 자동 변경
XSRF를 막기위한 클라이언트 사이드 지원

✔️Axios 설치

✨ npm axios 설치

npm install axios

✨ 설치 확인 후 하단 코드를 사용하여 Axios를 불러 올 수 있습니다.

import axios from 'axios';

✔️ 클라이언트(html)에서 axios 설치

✨ jsDeliver / unpkg CDN 둘중 하나를 선택해 넣으면된다.

<!--jsDeliver-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!--unpkg CDN-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

✅ Axios 문법 구성

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});

Axios 사용 예제

✔️Promise .then() 사용

import axios from 'axios';

export const exampleAxios = () => {
  return axios.get('https://test.com/api/sample')
  	 //첫 번째 API 호출의 결과에서 userId를 추출.
    .then((response1) => {
      const data = response1.data;
      const userId = data.userId;

      return axios.get(`https://test2.com/api/v2/${userId}`);
    })
	//두 번째 API 호출의 결과를 처리하고 반환.
    .then((response2) => {
      console.log('response:', response2.data);
      return response2.data;
    })
	//error반환
    .catch((error) => {
      console.error('대시보드 통계 데이터 가져오기 실패:', error);
      return { user: [] };
    });
};
}

✔️ async/await 사용

import axios from 'axios';

export const exampleAxios = async () => {
  try {
    const response = await axios.get('https://test.com/api/sample');
    console.log('response:', response.data);
    return response.data;
  } catch (error) {
    console.error('대시보드 통계 데이터 가져오기 실패:', error);
    return { user: [] }; 
  }
};

상하단 코드 모두 동일하게 동작하며, 비동기 처리로 진행하게됩니다.

✅ Axios 단축 메소드

axios를 편리하게 사용하기 위해 모든 요청 메소드는 aliases가 제공됩니다.
위 처럼 객체 옵션을 이것저것 주면 가독성이 떨어지니, 함수형으로 재구성하여 나눠논 것으로 이해하면 됩니다.
axios의 Request method에는 대표적으로 다음과 같은 것들이 있습니다.

GET : axios.get(url[, config])

POST : axios.post(url, data[, config])

PUT : axios.put(url, data[, config])

DELETE : axios.delete(url[, config])

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#getUri([config])

✅Axios 요청 예제

✔️ Get

Get 메서드에는 2가지 상황은 크게 존재합니다.

단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우

파라미터 데이터를 포함시키는 경우 (사용자 번호에 따른 조회)

const axios = require('axios'); // node.js쓸때 모듈 불러오기


// user에게 할당된 id 값과 함께 요청을 합니다.
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response); // 성공했을 때 반환
  })
  .catch(function (error) {
    console.log(error); // 에러가 났을 때 반환
  })
  .finally(function () {
    // 항상 실행되는 함수
  });
 

// 위와는 같지만, 옵션을 주고자 할 때는 이렇게 요청을 합니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () 
  });

async/await 사용

// async/await 를 쓰고 싶다면 async 함수/메소드를 만듭니다. 
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

✔️ Post

post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보냅니다.
위에서 봤던 get 메서드에서 params를 사용한 경우와 비슷하게 수행됩니다.

axios.post("url", {
		firstName: 'Fred',
		lastName: 'Flintstone'
    })
    .then(function (response) {
        // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

✔️ Delete

delete 메서드에는 일반적으로 body가 비어있다.
REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용합니다.

axios.delete('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })

하지만 query나 params가 많아져서 헤더에 많은 정보를 담을 수 없을 때는
다음과 같이 두 번째 인자에 data를 추가해줄 수 있습니다.

axios.delete('/user?ID=12345',{
    data: {
      post_id: 1,
      comment_id: 13,
      username: "foo"
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

✔️ Put

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신(수정)하는 목적으로 사용됩니다.
put 메서드는 서버 내부적으로 get -> post 과정을 거치기 때문에 post 메서드와 비슷한 형태입니다.

axios.put("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // 성공시 결과 값
    }).catch(function (error) {
        // error발생시 실행
    })