React Query를 사용하며 qeuryFn에 요청을 “어떤 라이브러리를 이용할까?” 라는 고민을하며 작성했던 글입니다.
→ 비교적 / 상대적 더 좋다고 생각 되는 경우, 둘다 있는경우 무승부 → 비교적 / 상대적 별로 안좋다고 생각되는 경우들어가기에 앞서
•
물.론. 개발자마다 중요하게 생각하는 부분이 다르다는건 인정함
•
전체적으로 Fetch 함수가 상대적으로 별로로 보일 순 있겠지만 해당 문제들은 간단하게 Wrapping 함수를 만들어 해결 가능! → 그게 귀찮아서 Axios를 쓰는거 아니냐고!
비교 대상
태생
Axios
•
8년전 만들어진 라이브러리
•
브라우저 환경 + NodeJS 환경 둘다 사용 가능
Fetch
•
Chrome 42 버전 부터 등장(2015년)한 브라우저에서 제공하는 공식 API
•
브라우저에서만 사용 가능 → NodeFetch 와 같은 라이브러리가 있기도합니다.
TimeOut 처리
•
일정 시간 후 에러를 발생시키는 로직 추가 시 다른 점 비교 → 서버가 응답 불가능한 상태일 경우 처리를 위해 프론트 엔드 로직에도 timeOut의 필요성을 느낌
Axios
•
비교적 간단한 설정
await axios.get("/url/suburl", {timeout:2000})
JavaScript
복사
Fetch
•
비교적 복잡한 설정
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), 8000);
const response = await fetch(resource, {
...options,
signal: controller.signal
});
clearTimeout(id);
return response;
}
JavaScript
복사
get 파라미터 처리
Axios
•
비교적 간단히 get 파라미터 설정 가능 → URLSearchParams()가 자동으로 수행됨
const { data } = await axios.get(`/jobs`, { params: { order, limit, offset, q, filter, parsing },});
return data;
JavaScript
복사
Fetch
•
자동으로 URL Encoding을 수행해주지 않아 아래와 같이 추가 작업을 수행해줘야함 → 물.론.래핑 함수 만들어서 사용할 수 있음
fetch('https://example.com?' + new URLSearchParams({
foo: 'value', bar: 2,
}))
JavaScript
복사
결론
fetch가 axios에 비해 사소한 기능들이 좀더 모자라지만 충분히 Wrapping 함수를 만들어서 처리할 수 있음 → 여기서 드는 생각! 굳이?!??!?!?!?!
•
Axios를 못쓰는 상황이면 Fetch를 사용할 예정
•
그 전까진 axios를 사용할...거에욥...!