[Axios] Axios 와 Fetch 의 차이

Javascript

by developia_yeso 2023. 8. 30. 14:57

데이터 전송과 관련해 fetch 와 axios 차이에 대한 궁금증이 생겼다.

이 둘의 차이점을 알고 적절하게 사용해보자!

# 알고가자

Axios 와 Fetch 는 모두 Promise 기반의 HTTP 클라이언트다. 즉, 이 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve) 혹은 거부 (reject) 할 수 있는 promise 가 반환된다.

Fetch

fetch Api 는 네트워크 요청을 위해 fetch() 라는 메서드를 제공하는 인터페이스다. 모던 브라우저에 내장되어있어 따로 설치할 필요가 없다. node.js의 실험적 기능을 활성화하여 사용할 수 있다.

Axios

자바스크립트에는 fetch api 가 내장 되어 있는 반면 axios 의 경우, 서드파티 라이브러리로 CDN 혹은 npm 이나 yarn 과 같은 패키지 매니저를 통해 설치하여 프로젝트에 추가, import를 통해 사용한다.

# Fetch 와 Axios의 기능 차이점

1) 문법

* Fetch

fetch 는 두개의 인자를 받는다. 첫 번째 인자는 가져오고자 하는 리소스의 URL 이고 두번째 인자는 요청의 설정 옵션을 포함하는

객체로 선택적 인자다.

두번째 인자로 설정 옵션을 넘기지 않을 경우, 기본적으로 GET 요청을 생성한다.

*axios

fetch 와 문법을 비슷하나 다양한 방식으로 요청이 가능하다.

2) JSON 데이터 처리

* Fetch

fetch()는 .then() 메소드에서 처리된 promise를 반환. 이때는 아직 우리가 필요한 json데이터의 포맷이 아니기 때문에 응답 객체의 .json()메소드를 호출한다. 그러면 json형식의 데이터로 이행(resolve)된 또 다른 promise를 반환한다.

따라서 일반적인 fetch 요청은 두 개의 .then() 호출을 갖는다.

* axios

axios 사용시 응답 데이터를 기본적으로 JSON 타입으로 사용할 수 있다. 응답 데이터는 언제나 응답 객체의 data 프로퍼티에서 사용이 가능하다.

설정옵션을 통해 responseType을 지정하여 기본 JSON 데이터 타입을 재정의 할 수도 있다.

3) 자동 문자열 변환(stringify)

데이터 전송을 위해서는 데이터를 JSON 문자열로 직렬화해야한다.

*Fetch

fetch api 를 사용하는 경우, JSON.stringify()를 사용하여 객체를 문자열로 변환한 뒤 body에 할당해야한다.

또한, fetch를 사용하면 headers 영역에 명시적으로 Content-Type 을 application/json 로 설정해야만 한다.

*axios

axios로 post 요청을 할 때, 요청 본문(request body)으로 보내고자 하는 data는 data 프로퍼티에 할당한다. 컨텐츠 유형 헤더의 경우도 설정할 수 있다. 그러나 기본적으로 axios는 Content-type 을 application/json으로 설정하므로 생략이 가능하다.

확실히 axios의 코드가 더 간결하다.

4) 에러처리(error)

fetch와 axios는 모두 이행(resolve) 되거나 거부(reject)된 promise를 반환한다. promise가 거부되면 .catch()를 사용하여

에러를 처리할 수 있다.

*Fetch

fetch의 경우, 404에러나 다른 http 에러 응답을 받았다고 해서 promise를 거부하지 않는다. fetch는 네트워크 장애가 발생한 경우에만 promise를 거부하기때문에 .then절을 사용해 수동적으로 http 에러를 처리해야한다.

=> 응답블록에서 응답의 ok 상태가 false인 경우 .catch 블록에서 처리되는 에러를 발생시킨다.

만약 잘못된 URL 엔드포인트를 요청했을 경우 ok와 status 속성은 각각 false 와 404 값을 가져 에러를 발생시키고 .catch()절에서 커스텀 에러 메세지를 출력한다.

* axios

axios의 경우 코드가 더 간결하다.

그러나 axios의 promise는 상태코드가 2xx의 범위를 넘어가면 거부한다. 에러 객체에 응답(response)또는 요청(request) 프로퍼티가 포함되어 있는지 확인하여 에러에 대한 자세한 정보를 알 수 있다.

에러 객체의 response 프로퍼티는 클라이언트가 2xx 범위를 벗어나는 상태 코드를 가진 에러 응답을 받았음을 나타낸다. 에러 객체의 request 프로퍼티는 요청이 수행되었으나 클라이언트가 응답받지 못했음을 나타낸다. 요청 또는 응답 속성이 모두 없는 경우는 네트워트 요청을 설정하는 동안 오류가 발생한 경우이다.

5) 응답시간 설정과 초과 / 요청 취소

*Fetch

fetch를 통한 요청취소는 AbortController 인터페이스를 사용 할 수 있다.

controller 객체를 생성하고 signal 객체와 abort() 메소드에 접근했다. 이 signal 객체를 설정 옵션을 통해 fetch() 로 넘기면

abort 메소드가 호출 될 때마다 fetch 요청이 종료된다. setTimeout 기능을 사용하여 서버가 4초이내에 응답하지 않으면 작업이 종료된다.

fetch 를 중단하기 위해서는 단순히 controller.abort() 를 호출하기만 하면 된다. abort()를 호출하게 되면 fetch의 promise는 자동으로 reject 되고 제어는 catch()블럭으로 진입한다.

여기서 흥미로운 부분은 signal 프로퍼티 부분이다. 이 프로퍼티는 사용자가 이미 controller.abort() 를 호출했느냐 여부에 대한 정보를 나타내는 aborted 프로퍼티를 가진 AbortSignal DOM inteface의 인스턴스이다.

또한 controller.abort() 가 호출될 때 발생하는 abort 이벤트에 리스너를 등록할 수 있다. 즉, AbortController는 단지 AbortSignal 의 퍼블릭 인터페이스일 뿐이다.

*axios

axios의 경우 timeout 속성을 설정 객체에 추가하여 요청이 종료될 때까지 시간을 밀리초로 지정할 수 있다.

Axios 와 Fetch 는 모두 모던 브라우저에서 광범위하게 지원되지만 IE 11 과 같은 오래된 환경에서는 ES6 Promise를 지원하지 않기 때문에 폴리필을 사용해야 한다. 또한 Fetch의 경우 이전 브라우저에서의 구현을 지원하기 위해 다른 폴리필을 추가해야 할 것이다.

그러므로 프로젝트에서 어떤 방법을 선택할 지는 개인의 선호도와 사용 편의성에 따라 달라진다.