Ajax, axios, fetch

JavaScript에서 비동기 HTTP 통신을 위해 사용 되는 것에는 Ajax, Axios, fetch가 있다.

Ajax는 Asynchronous JavaScript And XML 약자 입니다. Ajax의 약자를 토대로 본래 의미를 살펴보면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술이라고 할 수 있습니다.

HTML 과 여타 기술들을 사용하는 새로운 접근법이라고 설명하기도 하죠.Ajax를 통해 서버와 비동기적으로 통신함으로 인해 우리는 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 점진적으로 해당 부분의 사용자 인터페이스를 갱신할 수 있습니다. 간단하게 말해서 Ajax는 JavaScript에서 비동기 HTTP 통신이 가능하도록 해줍니다.

비동기 Http 통신이란 response와 request를 비동기 식으로 다룰 수 있다는 것을 의미합니다. 예를 들어 여러분이 페이스북에서 좋아요 버튼을 누를 때마다 페이지가 갱신이 된다면 음... 많이 불편하겠죠?
또는 구글에서 검색을 하는데 추천 검색어가 로드될때마다 페이지가 새로고침된다면 얼마나 짜증이 날까요?
우리는 비동기식으로 데이터를 주고받으며 위의 문제들을 해결하는 것입니다.

우리가 보통의 상황에서 Ajax라는 말을 사용할 때를 보면 JQuery의 Ajax를 일컫을 때가 많습니다. 이는 아주 조금 잘못되었습니다.
Ajax라는 친구를 JQuery를 통해 보다 더 쉽게 사용할 수 있기에 우리는 JQuery와 Ajax를 함께 묶어서 말할 때가 많은 것 뿐입니다.

Ajax라는 기술 자체는 이미 그 이전 2005년부터 쓰여왔다는 것을 아실 수 있습니다. 심지어 정립된 시기는 기보다 앞선 1999년이었습니다. 그렇지만 코드가 지저분했기에 이에 대한 보완이 필요했고, 그러던 도중jQuery에서 Ajax를 편리하게 사용할 수 있도록 정립하면서 jQuery가 급부상하게 된 것 입니다.
(물론 jQuery 코드 자체가 워낙 간단한 이유도 있습니다.)
또한 jQuery를 사용하여 Ajax를 구현할 경우 브라우저에 구애받지 않고 동일한 코드로 같은 작업을 구현할 수 있습니다.

HTTP Requests 를 위한 방법에는 Fetch 와 Axios 두가지가 있음.

• 순수 Ajax를 사용하는 경우

// use Ajax without Jquery

function reqListener (e) {
    console.log(e.currentTarget.response);
}

var oReq = new XMLHttpRequest();
var serverAddress = "https://jsonplaceholder.typicode.com/posts";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

• Jquery를 통해 Ajax를 사용하는 경우

// use Ajax with Jquery

var serverAddress = 'https://jsonplaceholder.typicode.com/posts';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

Jquery를 통해 Ajax를 사용할 때 코드가 훨씬 간단해지고 직관적 입니다.
뿐만 아니라 그냥 Ajax만 을 사용할 때는 브라우저 간 호환성에 대해 염두 해두고 각기 다른 코드를 작성해야하는 경우가 있는데 Jquery를 사용할 경우 호환성에 대해서도 보장이 됩니다.

fetch vs axios

기존에 WEB에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아닙니다.

요청의 상태나 변경을 구독 하려면 Event를 등록해서 변경사항을 받아야 했고 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어가기 좋지 않았습니다.

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

fetch

Fetch API는 네트워크 요청을 위해 fetch() 라는 메서드를 제공하는 인터페이스입니다. 모던 브라우저에 내장되어 있어 따로 설치할 필요가 없습니다. ES6부터 들어온 JavaScript 내장 라이브러리 입니다.

Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점으로 상당히 편리합니다.

• Built-in APIs 로서 별도의 설치 없이 모던 브라우저에서 사용 가능. 별도로 import 할 필요가 없음.
• 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지 가능
• 오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+지원. (polyfill 이용해서 하위 호환성 지원 가능)
  브라우저 호환성이 상대적으로 떨어짐.
• fetch요청은 필요한 JSON 데이터 포맷을 얻기 위해 일반적으로 두 개 .then호출을 가짐.
• POST요청을 할 시 'JSON.stringfy()'메서드를 사용해 문자열로 변환한 뒤 본문에 할당
• window object 에서 정의되어 있음.
• AbortController 이용해 Request 취소와 Response Timeout 설정 가능.
• Intercept Requests 기본적으로 제공되지 않음.Global Fetch Method를 Overwrite해 나의 인터셉터 정의 가능.
• Upload Progress 지원 안함. Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이용 가능.
• HTTP Pipeline(Request/Response)를 위한 Javascript Interface 이며, Promise 객체를 return
• promise 기반으로 만들어져서 데이터를 다루기 편리함.
• axios보다 속도가 빠름
• axios보다 기능이 부족
• 내장 라이브러리 이기에 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋다.

axios

Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리.
비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽습니다.

• 써드파티 패키지로 설치 및 import가 필요하지만 어렵지 않음
• wide browser 지원 ( 넓은 브라우저 호환성 )
• 응답 데이터를 기본적으로 JSON타입으로 사용 가능.
• 데이터를 자동으로 문자열로 변환해줌.
• XSRF Protection 보안 기능 제공.
• Request 취소, Response Timeout 설정 가능.
• HTTP Requests 의 intercept 가능.
• DownloadProgress 지원
• promise 기반으로 만들어져서 데이터를 다루기 편리함.

fetch

Fetch API는 네트워크 요청을 위해 fetch() 라는 메서드를 제공하는 인터페이스입니다. 모던 브라우저에 내장되어 있어 따로 설치할 필요가 없습니다. ES6부터 들어온 JavaScript 내장 라이브러리 입니다.
Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점으로 상당히 편리합니다.

• Built-in APIs 로서 별도의 설치 없이 모던 브라우저에서 사용 가능. 별도로 import 할 필요가 없음.
• 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지 가능
• 오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+지원.
  (polyfill 이용해서 하위 호환성 지원 가능)
• fetch요청은 필요한 JSON 데이터 포맷을 얻기 위해 일반적으로 두 개 .then호출을 가짐.
• POST요청을 할 시 'JSON.stringfy()'메서드를 사용해 문자열로 변환한 뒤 본문에 할당
• window object 에서 정의되어 있음.
• AbortController 이용해 Request 취소와 Response Timeout 설정 가능.
• Intercept Requests 기본적으로 제공되지 않음.
  Global Fetch Method를 Overwrite해 나의 인터셉터 정의 가능
• Upload Progress 지원 안함.
  Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이용 가능.
• HTTP Pipeline(Request/Response)를 위한 Javascript Interface 이며, Promise 객체를 return
• promise 기반으로 맏늘어져서 데이터를 다루기 편리함.
• axios보다 속도가 빠름
• axios보다 기능이 부족
• 내장 라이브러리 이기에 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋다.

결론

일단 웹 프론트 프레임워크(react js,vue js 등)을 다룰때에는 Axios를 사용하는 것이 더 좋다고 생각합니다.
Axios는 크로스 브라우징에 신경을 많이 쓴 모듈인게 눈에 보이며, 기능또한 우수하기 때문입니다.
전체적으로 fetch 상위 호환이라고 생각을 합니다.
다만, react-native에서는 fetch를 사용하는 것이 아주 조금 더 좋다고 생각합니다. react-native의 경우 아직 안정화 된 프레임워크가 아니기에 지속적인 version update가 진행되고 있고, axios에서 이를 반영하지 못할 경우 생각지 못한 에러가 발생할 수 있다는 우려 때문입니다.
이론적인 결론은 이렇지만 Ajax 툴은 둘다 사용해보는 게 좋을 것 같습니다.. 러닝 커브가 전혀 존재하지 않을 정도로 fetch와 Axios의 코드 차이가 미미 하기도 하고 사실 크게 부담느낄정도로 장단점이 극명 하지도 않기 때문입니다.

Promise

프로미스는 자바스크립트 비동기 처리에 사용되는 객체. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용

참고
https://yeonfamily.tistory.com/10
https://kofearticle.substack.com/p/korean-fe-article-axios-vs-fetch
https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch