비동기 HTTP 통신 (fetch vs. Axios)

1. fetch

2. Axios

3. fetch와 Axios 사용 예시

---

1. fetch

[그림 1] fetch와 axios

기존에 웹에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아니다. 요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 했고 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어가기 좋지 않았다. 

 

이를 보완하기 위해 HTTP 요청에 최적화 되어 있고 상태도 잘 추상화되어 있는 API들이 생겨나기 시작했다. 대표적으로 fetch와 Axios가 그 예이다.

 

fetch는 ES6부터 JavaScript의 내장 라이브러리로 들어왔다. promise 기반으로 만들어졌기에 Axios와 마찬가지로 데이터를 다루는데 어렵지 않으며, 내장 라이브러리라는 장점으로 인해 상당히 편리하고 코드 또한 간단하다.

 

 

2. Axios

Axios는 Promise based HTTP client for the browser and node.js로 node.js와 브라우저를 위한 HTTP 통신 라이브러리이다. 비동기로 HTTP 통신을 가능하게 해주며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.

 

Axios를 사용하기 위해서는 아래의 명령어를 통해 라이브러리를 설치해주어야 한다.

npm i axios

 

react를 사용하는 사람들을 fetch보다 Axios를 많이 선호하는 편이다.

 

비동기 통신	fetch	Axios
장점	내장 라이브러리이므로 별도의 import를 해줄 필요가 없다.	response timeout 처리 방법이 있다. (fetch에 존재하지 않는 기능)
	promise 기반으로 다루기 쉽다.	promise 기반으로 다루기 쉽다.
	내장 라이브러리이므로 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋다.	크로스 브라우징에 신경을 많이 썼기 때문에 호환성이 뛰어나다.
단점	Internet Explorer의 경우에는 fetch를 지원하지 않는 버전도 존재한다. (브라우저 호환성이 상대적으로 떨어짐)	모듈 설치를 해줘야 한다.
	기능이 부족하다.

 

 

3. fetch와 Axios 사용 예시

[그림 2] fetch와 Axios 사용 예시

clickHandler(), clickHandler2(), clickHandler3(), clickHandler4()는 모두 아이디의 중복 확인을 하는 기능을 하는 함수이다.

 

clickHandler()는 순수 AJAX를 이용하여 구현하였고, clickHandler2()는 fetch를 이용하였다. clickHandler3()와 clickHandler4()는 Axios를 이용하여 비동기 통신을 구현하였다.

 

3.1. fetch 사용 예시

fetch문은 fetch(url, [option])와 같은 형태로 쓰인다. url은 접근하고자 하는 URL을 의미하고, option은 선택 매개변수로 method나 header 등을 지정할 수 있다. option에 아무것도 넘기지 않으면 요청은 GET method로 진행되어 url로부터 콘텐츠가 다운로드된다.

 

응답은 대개 두 단계를 거쳐 진행된다.

 

먼저, 서버에서 응답 헤더를 받자마자 fetch 호출 시 반환받은 promise가 내장 클래스 response의 인스턴스와 함께 이행 상태가 된다. 이 단계는 아직 본문(body)이 도착하기 전이지만, 개발자는 응답 헤더를 보고 요청이 성공적으로 처리되었는지 그렇지 않은지 확인할 수 있다.

 

네트워크 문제나 존재하지 않는 사이트에 접속하려는 경우와 같이 HTTP 요청을 보낼 수 없는 상태에서는 promise는 거부 상태가 된다.

 

두 번째 단계에서는 추가 메소드를 호출해 응답 본문을 받는다. response에는 promise를 기반으로 하는 다양한 메소드가 있다. 이 메소드들을 사용하면 다양한 형태의 응답 본문을 처리할 수 있다.

• response.text() : 응답을 읽고 텍스트를 반환한다.
• response.json() : 응답을 JSON 형태로 파싱한다.
• response.formData() : 응답을 FormData 객체 형태로 반환한다.
• response.blob() : 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환한다.
• response.arrayBuffer() : 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환한다.

 

3.2. Axios 사용 예시

axios의 메소드를 사용하기 위해 4가지의 기본 Params를 지정해야 한다.

• Method
• URL
• Data (optional)
• Params (optional)

 

axios 객체에 HTTP request method를 붙여서 다음과 같이 사용할 수 있다. 요청 방식은 GET이 디폴트 값이다.

• axios.get()
• axios.post()
• axios.delete()
• axios.put()
• axios.patch()
• axios.option()