axios가 불러온 개발 편의성

요즘 웹 개발을 하는 사람이라면 api 요청을 보낼때 나를 포함해서 대부분 axios를 사용하여 api 요청을 보낸다.

갑자기 사람들이 js에 내장되어 있는 fetch를 사용하지 않고 axios를 많이 사용하고 있는 이유가 궁금해져 이 블로그를 작성한다.

본격적으로 시작하기전에 간단하게 axios를 설명해주자면 fetch와 같이 api 요청을 보낼수 있는 라이브러리이다.

fetch 보다 좋은점

fetch보다 좋은점은 당연하게도(?) 많다.

명시적인 사용 방법

해당 장점은 나의 주관적인 생각 들어간것 같긴하지만 적어보자면 말 그대로 axios의 사용방법이 fetch와 비교 했을때 더 명시적인것 같다.

fetch를 사용해서 get 요청을 보낼때에는 init 객체에 method 명시가 선택사항이지만, get이 아닌 다른 요청을 보낼때는 method 명시가 필수사항이어서 get 요청만 본다면 생략이 가능해서 간편한거 같아보이지만 명시적이지 않아보인다. 물론 사용사가 사용할때 init 객체를 필수적으로 하면 명시적으로 사용할수 있지만 기능 자체에서 필수로 하지 않아서 이야기를 하는것이다

하지만 axios를 사용하면 어떤 method로 요청을 보내든 axios.[method]로 접근해서 요청을 보내기 때문에 내생각에는 조금더 명시적인것 같다.

// fetch
const getData = async () => {
  const res = await fetch("request url");
  const data = await res.json();

  console.log(data);
};

// axios
const getData = async () => {
  const res = await axios.get("request url");

  console.log(res.data);
};

자동 json 파싱

위의 예시 코드를 보면 알겠지만 fetch와 axios가 각각 데이터를 가져와서 console.log()를 하는과정이 다르다 바로 axios는 자동으로 같이 파싱을 해줘서 fetch처럼 json() 메서드로 파싱해줄 필요가 없다.

이런 사소한 코드 한줄 생략이 실제 개발하면서 되게 간편하고 유용했던것 같다.

axios instance

axios instance는 간단하게 설명하자면 요청을 보낼때 공통으로 필요한 config들을 변수에 담아서 재사용한다고 생각하면 된다

export const axiosInstance = axios.create({
  baseURL: '/api',
  timeout: 3000,
});

instance를 생성할때는 axios.create로 생성하면 되고 인자로 보내는 객체안에 요청 config를 넣어주면 된다

axios interceptor

axios instance를 사용하면 axios interceptor 기능을 사용할수 있다 interceptor의 기능은 요청을 보내기 전, 응답을 받기 전에 요청, 응답을 가로채서 로직을 수행시킬수 있게 한다

 

axios interceptor를 사용한다면 다양한 상황에서 사용할수 있다

 

request를 가로채는 상황

• 요청을 보내기 전에 요청을 가로채서 인증 토큰이 없다면 추가하는 로직
• post 요청을 보내기 전에 요청을 가로채서 보내는 데이터가 없다면 요청을 취소하는 로직

response를 가로채는 상황

• 응답을 받기전에 가로채서 상태 코드가 200번대가 아니라면 reject 처리를 하는 로직
• 응답을 받기전에 가로채서 상태 코드가 401(권한 없음)이라면 refresh 후 재요청을 하는 로직

이렇게 다양한 사용에서 활용 가능하다

fetch 보다 불편한점

결국 라이브러리..

솔직히 말하자면 단점이랄게 딱히 없다.

그래도 찾아보자면 axios도 라이브러리이기 때문에 처음 세팅할때 설치를 해줘야한다 이정도?

browser, server 동시 지원

axios 공식 홈페이지에 접속하면 "브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리" 라고 소개가 되어있다.

브라우저에서 지원하는 기능과 서버(node.js)에서 지원하는 기능 모두를 가지고 있어 라이브러리 용량이 크다.

다른 요청 라이브러리는 없었을까?

axios에 대해 알아보다 다른 request 라이브러리는 없을까? 라는 생각이 들어서 찾아보았다.

ky

제로초님의 쇼츠를 보다 ky라는 요청 라이브러리를 알게되어서 간단하게 사용해봤다 axios보다 용량이 가벼워서 사람들이 사용한다고 하는데

내가 사용해봤을때는  axios를 밀어낼 만큼 매력적인거 같지는 않았다(물론 내가 깊게 사용하지 않아서 그런것일수도 있다) 그래도 사용해보고 싶다면 사용해보는것도 나쁘지는 않을거 같다.

마무리

이번에 fetch와 axios를 비교도 해보고 또 ky라는 요청 라이브러리도 알아봤는데 참 많은 생각이 든다.

지금까지는 새로운 프로젝트를 진행하거나 토이 프로젝트를 할때 요청을 할일이 있다면 무조건적으로 axios를 설치해서 사용해봤었는데

axios의 장점이 많은 만큼 꼭 다 활용할수 있는 상황에서 사용을 해야겠다는 생각이 든다.

그리고 ky라는 라이브러리도 앞으로 사용하는 사람이 많아질거 같아 눈여겨 봐야겠다.