Axios 라이브러리

Ajax: Javascript, XMLHttpRequest 객체를 사용해 웹 브라우저와 웹 서버 간에 데이터를 비동기적으로 교환 하는 기술.
최근엔 클라이언트와 서버 간 리스트 데이터를 주고받을 때 JSON 많이 사용됨.

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.
=> 간단하게 Ajax를 보다 편리하게 사용할 수 있도록 도와주는 라이브러리.

Ajax를 보완한 Axios가 제공하는 기능

• 구문의 간결성
• 에러 처리 항상
• JSON 데이터 자동 변환
• 요청 및 응답 인터셉터
• 타임아웃 설정

등이 있다.

보통 axios vs fetch 중 사용하는 것 같다.
각자 장단점이 있는 것 같다.

axios	fetch
설치 필요	설치 필요 없음
XSRF 보호 해줌	보호 X
data 속성 사용	body 속성 사용
data는 object를 포함	body는 문자열화 되어있음
자동 JSON데이터 형식 변환	.json()메서드를 사용해야 함
요청 취소가능하고 타임 아웃 기능 있다	해당 기능 존재 안함

이 외에도 몇가지 있지만 여기까지만 정리하겠습니다.
보통 간단하게 사용할땐 fetch를 쓰고, 확장성을 염두했을 땐 axios를 사용하는 경향이 있는 것 같다.
Axios사용 법은

설치

npm install axios

문법 구성

axios({
  url: "https:// ~~~ ", // 통신할 웹문서
  method: "get" // 통신할 방식
  data: { // 인자로 보낼 데이터
  	foo: "~~"
  }
});	

axios 요청(request) 파라미터 옵션

많기에 자주 사용되는 것만 적어 보겠다.

method: 요청방식. (get이 default)
url: 서버 주소
baseURL: rul을 상대경로로 쓸때 맨 앞에 붙는 주소
headers: 요청 헤더
data: 요청 방식이 "PUT", "POST", "PATCH"에 해당하는 경우 body에 보내는 데이터
params: URL 파라미터
responseType : 서버가 응답해주는 데이터 타입 지정
withCredentials: cross-site access-control 요청을 허용 유무로 쿠키값 전달 가능

axios Instance 만들기 실습때 해본 코드

axios.create({
    baseURL: BASE_URL,
    timeout: DEFAULT_TIMEOUT,
    headers: {
      "content-type": "application/json",
      Authorization: getToken() ? getToken() : "",
    },
    withCredentials: true,
    ...config,
  });

단축 메소드

GET: axios.get(url[, config])
POST: axios.post(url[, config])
PUT: axios.put(url[, config])
DELETE: axios.delete(url[, config])

대표적으로 이런것들 있다.

동시 요청도 가능하다.

자세한 것은
https://axios-http.com/kr/docs/intro
에서 꼼꼼히 공부해 보자.