Ajax , Axios , Fetch (비동기 http통신)

Ajax

 

ajax는 JavaScript에서 비동기 HTTP 통신이 가능하도록 해줍니다.  비동기통신은 일부의 정보만 요청하기때문에 전체 화면을 랜더링하지 않고 점진적으로 해당 부분의 사용자 인터페이스를 갱신할 수 있습니다.

 

 

장점 :

jQuery를 통해 쉽게 구현이 가능하다.

error, success, complete의 상태를 통해 실행흐름을 쉽게 조절할 수 있다.

 

단점 :

jQuery를 사용해야한다.

promise기반이 아니다.

 

 

 

기존에 WEB에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아닙니다. 요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 했고 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어가기 좋지 않았습니다.
이를 보완하기 위해 HTTP 요청에 최적화 되어 있고 상태도 잘 추상화 되어 있는 api들이 생겨나기 시작했습니다. 대표적으로 Axios와 fetch입니다 

 

 

Axios

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

 

장점 : 

fetch에서 지원하지 않는 기능들을 지원해준다.

구형 브라우저를 지원한다.

Promise base

node.js에서의 사용이 가능하다

응답시간 초과를 설정하는 방법이 있다.

JSON데이터 자동변환이 가능하다.

request aborting (요청취소)가 가능하다

 

 

단점 : 

라이브러리 설치가 필요하다.

 

 

 

 

fetch

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

 

 

장점:

내장 라이브러리이기에 별도의 import를 해줄 필요가 없다.

promise 기반으로 다루기가 쉽다.

 

 

 

단점:

JSON데이터 자동변환이 불가능하다

internet explorer의 경우에는 fetch를 지원하지 않는 버전도 존재한다. (브라우저 호환성이 상대적으로 떨어진다.)

기능이 부족하다