이번 주는 axios를 새로 배웠다. 이때까지 fetch, Promise 등을 이용해서 비동기 통신을 써보았는데 axios는 더 편한 인터페이스와 다양한 기능을 제공한다. 오늘은 이 axios에 대해서 알아보도록 하자.

axios?

axios는 공식 홈페이지에 들어가 보면 '브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP클라이언트 라이브러리'라고 소개가 되어있다. Promise 기반이라는 대목에서 알 수 있듯이 axios를 사용할 땐 fetch를 쓰던 때처럼 async, await도 물론이고 then을 이용해서도 처리를 할 수 있다.
하지만 이렇게만 보면 '그럼 fetch랑 뭐가 달라? 오히려 라이브러리를 설치해야 쓸 수 있다면 더 좋지 않은 거 아니야?'하고 생각할 수도 있다. 하지만 위에서도 말했듯이 훨씬 더 인터페이스가 편해졌고 그만큼 기능이 더 많아졌다. 아래 코드를 보면 이렇게 말한 이유를 확실히 알 수 있다.

// fetch로 get 요청
const callSomething = async () => {
	let response = await fetch('http://localhost:5001/sleep_times');

	console.log(response);
}

// axios config로 get 요청
axios({
  method: 'get',
  url: 'http://localhost:5001/sleep_times',
})
  .then((response) => {
			console.log(response);
  });

// get메서드로 요청
axios.get("http://localhost:5001/sleep_times");


// fetch로 post요청
const callSomething = async () => {
	let data = {
      "id": 6,
      "day": "일", 
			"sleep_time": "10:00"
    },
	let response = await fetch('http://localhost:5001/sleep_times', {
	  method: 'POST',
	  headers: {
	    'Content-Type': 'application/json;charset=utf-8'
	  },
	  body: JSON.stringify(data)
	});
		console.log(response);
}

// axios로 post요청
let data = {
	id: 6,
	day: "일", 
	sleep_time: "10:00"
};

axios.post("http://localhost:5001/sleep_times", data);

같은 get, post요청을 보낸다고 해도 fetch에 비해서 axios는 코드 자체가 굉장히 간단한데, 그 이유는 axios에서 제공하는 get과 post라는 메서드를 사용하면 별도의 설정이 필요 없기 때문이다. 이처럼 axios는 통신을 더 편하게 할 수 있는 여러 메소드를 제공해주고 있다.

fetch와 비교

axios	fetch
써드파티 라이브러리 설치 필요	현대 브라우저에 빌트인이라 설치 필요 없음
XSRF보호	별도 보호 없음
data속성을 사용	body속성을 사용
data는 object를 포함	body는 문자열화
status가 200이고 statusText가 "OK"이면 성공	응답객체가 "OK"속성을 포함하면 성공
요청을 취소할 수 있고 타임아웃을 걸 수 있다	해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함	지원하지 않음
좀더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

출처: https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

axios config

위 예시 보면 axios의 get방식에도 두 가지가 있다. 하나는 직접 config를 해주는 방식이고 get메서드를 이용하는 방법이 있다. config는 config를 직접 지정해주는 방식이다.

axios({
  url: 'https://test/api/cafe/list/today', // url
  method: 'get', // config들
  data: { 
    foo: 'diary'
  }
});

이 config도 상당히 많은데 대표적인 몇 가지를 알아보도록 하자.

• method : 위에도 나오듯이 요청 방식을 설정
• url : 요청할 url
• data : 요청 방식이 'PUT', 'POST'할 경우 body에 보내는 데이터이다.
• responseType: 응답을 받는 타입을 지정함. 기본적으로 json이 default값이다.

단축 메서드

axios에서 제공하는 편리한 메서드들이 있다. 앞서 본 get, post 이후에도 instance를 만드는 create, formdata를 보내는 FormData()도 있다. 가장 유용한 것은 interceptor다. axios의 interceptor는 then으로 처리되기 전에 요청이나 응답을 가로챌 수 있다. 요청을 보낼 때 토큰을 붙이고 싶거나, 응답을 받아서 처리하기 전에 요청이나 응답을 가로채서 다양하게 활용할 수 있다.

// axios 객체 만듦
import axios from "axios";

const instance = axios.create({
  headers: {"Content-Type":"application/json"},
  timeout: 5000,
});

export default instance;

// 요청 전 가로채서 토큰을 더해줌.
instance.interceptors.request.use(config=>{
  const _conf = {headers:{
    "Content-Type":"application/json",
    "X-Auth-Token":"xxxxxxxx"}, timeout: 3000
  };
  console.log(config, _conf);
  return _conf;
}, err=>{
  return Promise.reject(err);
});

응답을 가로채는 상황의 경우, 서버가 일시적으로 상태가 좋지 않아서 에러를 보내줬을 때, 그 응답을 가로채서 몇 번 더 요청을 보내게 할 수도 있을 것이다.

이런 방식으로 axios의 interceptor는 매우 유용한 방법으로 사용할 수 있다.

[참고자료]
https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9
https://axios-http.com/kr/