[JS] Axios

HP :) 😃·2022년 4월 29일

안녕하세요 hp입니다 :)

오늘은 Axios에 사용방법에 대해서 알아보도록 하겠습니다.

📚 개념

axios란 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리입니다. 쉽게 말해서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로 Ajax처럼 사용되는 것입니다.

⚒️ 사용법

index.html에 아래 두 스크립트를 추가해주면 axios 라이브러리를 쉽게 사용할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

또한 npm을 사용하시면 아래와 같이 보다 쉽게 사용하실 수 있습니다.

npm i axios

axios는 아래와 같은 방법으로 CRUD 방식으로 사용하게 됩니다.

POST ( Create )

POST는 새로운 자원을 생성할 때 사용합니다.

axios.post(url, data 객체)

GET ( Read )

GET은 자원을 요청할 때 사용합니다.

axios.get(url)

PUT ( Update )

PUT은 자원을 갱신할 때 사용합니다.

axios.put(url, data 객체)

PATCH ( Update )

PATCH는 PUT과 다르게 전체의 데이터가 아닌 일부데이터만 수정할 때 사용합니다.

axios.patch(url, data 객체)

DELETE ( Delete )

DELETE는 자원을 삭제할 때 사용합니다.

axios.delete(url)

실제로 사용할때는 아래와 같은 방법으로 많이 사용되는데 POST를 예시로 하여 살펴보겠습니다.

function axiosPost() {
  const my =  { 
    email: "eve.holt@reqres.in", 
    password: "cityslicka" 
  };
  axios.post('url',my)
    .then(res =>{
      console.log(res);
    })
}

export default axiosPost;

만일 우리가 올바른 이메일과 비밀번호로 POST 요청을 보낸다고 했을때 axios는 promise 기반으로 만들어졌기 때문에 then 메소드를 통해 response를 확인할 수 있습니다. 그 response 안에 있는 객체는 아래와 같은 정보를 가지고 있어 우리는 이러한 정보를 가지고 핸들링 할 수 있습니다.

{
  // `data`는 서버가 제공하는 응답입니다.
  data: {},

  // `status`는 HTTP 상태 코드입니다.
  status: 200,

  // `statusText`는 HTTP 상태 메시지입니다.
  statusText: 'OK',

  // `headers`는 HTTP 헤더입니다.
  // 모든 헤더 이름은 소문자이며, 괄호 표기법을 사용하여 접근할 수 있습니다.
  // 예시: `response.headers['content-type']`
  headers: {},

  // `config`는 요청을 위해 `Axios`가 제공하는 구성입니다.
  config: {},

  // `request`는 이번 응답으로 생성된 요청입니다.
  // 이것은 node.js에서 마지막 ClientRequest 인스턴스 입니다.
  // 브라우저에서는 XMLHttpRequest입니다.
  request: {}
}