Axios - HTTP 비동기 통신 라이브러리

What is Axios?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 비동기 통신 클라이언트이다.

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

Why use Axios?

자바스크립트의 fetch api와 비교했을 때 더 많은 기능들을 제공한다.
프레임워크에서 ajax를 구현할 때는 axios를 쓰는 편이다.

	axios	fetch
유형	써드파티 라이브러리	브라우저 빌트인
XSRP	XSRF 보호를 해준다.	별도 보호 없음
데이터	data 속성을 사용	body 속성을 사용
데이터 타입	data는 object를 포함한다	body는 문자열화 되어있다
응답	status가 200이고 statusText가 ‘OK’이면 성공이다	응답객체가 ok 속성을 포함하면 성공이다
json	자동으로 JSON데이터 형식으로 변환된다	.json()메서드를 사용해야 한다.
요청 커스텀	요청을 취소할 수 있고 타임아웃을 걸 수 있다.	해당 기능 존재 하지않음
HTTP 요청	HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download	download 진행에 대해 기본적인 지원을 함	지원하지 않음
지원 브라우저	좀 더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+

Getting Started

# 설치
yarn add axios

import axios from 'axios'

// promise chaining
axios
  .get('/user', {
    params: {
      ID: 12345,
    },
  })
  .then((response) => console.log(response))
  .catch((error) => console.log(error))
  .then(() => console.log('done'));

// async await
async function getUser() {
  try {
    const response = await axios.get('/use?ID=12345');
  } catch (error) {
    console.log(error);
  }
}

Examples

• json-server와 함께 사용하면 서버와 비동기 통신을 쉽게 구현할 수 있다.

---

References

• https://axios-http.com/kr/docs/intro
• Inpa Dev