REST API #5 - Axios vs Fetch ?

엄마가 좋니? 아빠가 좋니?

Axios의 장점

1. Intercept / Reject / Abort functions

- 해당 기능이 존재하는 것으로 인해서, 에러에 대한 처리와 호출에 대한 관리를 더 섬세하게 다룰 수 있습니다.

2. Shorthand methods

- options에 HTTP 메서드 타입을 지정하지 않음과 동시에 dot operator를 사용해서 더욱 명확하게 코드를 작성할 수 있습니다.

3. Auto-transform JSON

- fetch()에서 response.json()을 한번 해줘야 하는 것을 자동으로 변환을 해 줘서 step을 하나 줄일 수 있습니다.

4. Timeout

- fetch()는 제공하지 못하는 timeout option에 따른 abort function을 사용하는 것으로 일정 시간 이후에도 응답이 없는 경우 호출 자체를 취소할 수 있습니다.

5. IE supports

- fetch()는 Chrome 42+, Firefox 39+, Edge 14+, Safari 10.10+, ... 등 특정 버전 이상의 브라우저에서만 지원이 가능하며 IE는 지원하지 않고 있습니다. 크로스 브라우징을 해결해야 하는 경우 염두에 두셔야 할 것 같습니다.

6. 코드의 중복성 방지

- config default settings을 통해서 중복 코드가 많은 API call의 코드 라인을 줄일 수 있습니다.

Fetch의 장점

1. Javascript basic function

- 자바스크립트에 기본적으로 탑재되어 있어서, Import를 수행할 필요가 없습니다. 또한 Import하지 않는 것으로 인해서 소스 전체의 크기가 줄어들어서, TTV(Time to View) 혹은 TTI(Time to Interact)를 조금이나마 줄일 수 있습니다.

- 추가적으로 React Native의 경우 계속 releases가 추가될 것뿐 아니라 나온 지 얼마 지나지 않아서 각 업데이트마다 중요한 이슈를 해결할 가능성이 높습니다. 그래서 자바스크립트 기본이 아닌 axios의 경우 지원하지 못할 가능성이 있습니다.

장단점이 아닌 공통 / 차이점

- response에 대한 추가 처리가 가능합니다.

- axios는 data property를 사용하고, fetch는 body property를 사용합니다.

- axios의 data는 object를 가지고 있고, fetch의 body는 stringified 되어야 합니다.

- axios는 download progress에 대해서 built-in function이 존재하고, fetct는 upload progress에 대해서 이렇다 할 기능이 존재하지는 않습니다.

그래서?

어느 것이 더 좋다 라는 것을 이야기하고자 하는 것은 아니기 때문에 "엄마가 좋니? 아빠가 좋니?"라는 질문에 때에 따라서 엄마가 좋기도, 아빠가 좋기도 한 것처럼 특정 상황에 있어서 각자를 선택하는 것이 좋겠습니다. 프로젝트의 특성(server response에 대한 신뢰 정도 / 프로젝트의 복잡도 / 사용하는 데이터)에 따라서 취사선택이 필요하다고 생각합니다. 한편으로 react-native에 대해서는 fetch를 사용하면 성능상 이점을 취하는 것과 버전에 대해서 자유롭기 때문에 한 번쯤은 고려하는 것도 좋겠다는 생각입니다.

 

※ 잘못된 부분이나 궁금한 점 댓글로 작성해 주시면 최대한 답변하겠습니다. 읽어주셔서 감사합니다~

※ 새로운 기술이나 정보를 알게 되면 글 추가 정리를 하니 하단의 좋아요 버튼 체크하시면 쉽게 확인 가능하십니다!

※ GraphQL #1 - GraphQL에서 개념적 접근을 해 볼 생각입니다.