[JS] Axios

---

알고있으면 좋은 Javascript Tip✨

---

Axios란 무엇인가?

• Axios는 브라우저와 노드 환경에서 사용할 수 있는 프로미스 기반 HTTP 클라이언트 라이브러리다.
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다.
• 크로스 브라우징 최적화로 브라우저 호환성(구형 브라우저 지원)이 뛰어나다.

 

(1) 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>

• Node.js에서 npm을 사용하여 라이브러리를 설치다. (npm 설치 방식)

npm install axios

 

(2) Axios 기본 문법

import axios from 'axios';        // React 사용 시 모듈 불러오는 방법
const axios = require('axios');   // node.js 사용 시 모듈 불러오는 방법

axios({
  url: 'url 주소',    // 통신할 웹 서버
  method: 'get',   // 통신할 방식
  data: {
    foo: 'diary'     // 인자로 보낼 데이터
  }
});

• url : 서버 주소
• method : 요청 방식 (기본값 get)
• data : 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터

 

(3) Axios 응답(response) 데이터

axios({
    url: "url 주소",    // 통신할 웹 서버
    method: "get",   // 통신할 방식
})
.then(function(response) {
  console.log(response.data)       // 서버가 제공한 응답(데이터)
  console.log(response.status)     // `status`는 서버 응답의 HTTP 상태 코드
  console.log(response.statusText) // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지
  console.log(response.headers)    // `headers` 서버가 응답 한 헤더 (소문자로 제공)
  console.log(response.config)     // `config`는 요청에 대해 `axios`에 설정된 구성(config)
})

• axios를 통해 요청을 서버에게 보내면, 서버에서 처리를하고 다시 데이터를 클라이언트에 응답 하게 된다. 이를 .then으로 함수인자로(response)로 받아 객체에 담긴 데이터가 바로 응답 데이터이다.

 

(4) Axios 단축 메서드

• Axios의 Request method는 GET, POST, PUT, PATCH, DELETE 방식이 있다.

const exampleAxios = () => {
  // 1. 기존 config 방법
  axios({
    method: 'get',
    url: 'http://localhost:3000/api',
  })
  .then((response) => {
    console.log(response);
  });

  // 2. 단축 메서드 방법
  axios.get('http://localhost:3000/api')
    .then((res) => console.log(res)) // 성공 핸들링
    .catch((err) => console.log(err)); // 에러 핸들링
};

 

(5) Axios 와 Fetch의 차이점은?

Axios	Fetch
npm install axios	별도의 설치가 필요 없다.
wide browser 지원	크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원. (polyfill 이용해서 하위 호환성 지원 가능)
XSRF Protection 보안 기능 제공	없음.
자동 JSOM 데이터 변환 지원	JSON 데이터 핸들링 위해 추가 절차가 필요하다.
Request 취소 와 Request Timeout 설정 가능	없음. (AbortController 이용하여 구현 가능)
HTTP Requests 의 Intercept 가능	Intercept Requests 기본적으로 제공되지 않음. (Global Fetch Method를 Overwrite 하여 나의 인터셉터 정의 가능)
Download Progress 지원	Upload Progress 지원안함. (Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이용 가능)