HTTP Library 비교( Axios ) - boostcamp-2020/Project03-A-TOTP GitHub Wiki

HTTP Library 비교

  • Fetch, Axios, Bent, Got를 비교하고 왜 Axios를 선택하였는지 설명을 진행할 것입니다.

fetch API

  • ES6의 비동기 통신 방법이다.
  • 사용이 쉽고 간단하다.
  • Promise 객체로 값을 반환받는다.
  • Response 타입별로 쉽게 적용이 가능하다. (Json, blob 등)
  • 브라우저 호환성
    • fetch API 대부분의 최신 브라우저에서 정상동작한다.
    • 하지만 IE(익스플로어)같이 ES6를 완벽하게 지원하지 않는 곳에서는 fetch API가 동작하지 않는다.

Axios

  • Promise기반 비동기 통신 방법이다.
  • API URL의 기본 인스턴스를 만들 수 있다.
  • 요청을 취소하는 Request Abortion에 대한 방법을 제공한다.
  • 응답 시간 초과를 설정하는 방법이 있다.
  • CSRF 보호 기능이 내장되어 있다.
  • JSON 데이터 자동변환이 가능하다.
  • 브라우저 호환성
    • 구형 브라우저를 지원한다.
    • IE8 이상을 포함한 모든 최신 브라우저 또한 지원한다.

Bent

  • Promise기반 비동기 통신 방법이다.
  • 원하는 Method 객체를 생성후에 사용가능하다.
  • 실제 Get, Post 요청 테스트 결과에서 현재 Deprecated 예정인 Request와 유사하게 상위권에 해당하는 성능을 보여줬다.
  • 사용의 편리함이 높지는 않다.

Axios를 선택한 이유

저희팀은 고민끝에 Axios를 선택하고 사용하기로 했는데 그 이유를 설명해보자면

  1. 호환성이 좋다.
  • IE나 구버전, 신버전 호환에 문제가 많은 Fetch와 달리 Axios는 뛰어난 호환성을 보여준다.
  1. 사용성이 좋다.
  • Axios를 불러와서 원하는 Method를 선택하여 형식에 맞게만 보내주면 잘간다 !
  1. 다양한 기능을 제공한다.
  • Config 설정으로 Interceptor, config 등의 설정으로 사용자의 상황에 맞게 설정하여 사용하기 좋다. 이같은 이유 때문에 Axios를 사용하기로 하였습니다.

사용하고 나서의 후기 (2020-12-17)

우선 사용성이 정말 좋았다. 코드가 직관적이어서 사용하기도 편하고, 다른사람의 코드를 이해하기도 편했다.
또한 Interceptor를 사용하여 request, response, error에 대한 전반적인 핸들러를 사용해봤는데, 코드의 반복성도 줄이고 Error를 처리하기에 너무 편리한 기능이었다.
요청, 반응 속도 또한 많은 데이터가 필요한 부분이 아니라면 느리다고 느끼지 못할 정도로 속도 또한 좋았다.

IE를 지원하기 위해서 사용 가능하도록 Fetch API를 지원 가능하도록 변환하는 npm 등의 패키지를 설치할 수도 있고 아니면 fetch가 아닌 axios 등의 라이브러리를 사용하는 것이 가장 간단하고 빠른 해결책입니다.