Ajax, Axios, Fetch 차이점

Ajax
Asynchronous JavaScript And XML
Javascript를 이용한 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신
XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있다.

장점

• JQuery를 통해 쉽게 구현 가능
• Error, Success, Complete 의 상태를 통해 실행 흐름을 조절 가능

단점

• JQuery를 사용해야 간편하고 호환성이 보장됨
• Promise 기반이 아님

XMLHttpRequest(XHR)를 사용한 코드

xhr = new XMLHttpReqeust();
xhr.onreadystatechange = function(){ // 요청 콜백 
  if(xhr.readyState === xhr.DONE){ // 요청 완료시
	if(xhr.status === 200 || xhr.status === 201){
      console.log(xhr.responseText)
    } else {
      console.error(xhr.responseText);
    }  
  }
};

xhr.open('GET', 'https://localhost:8080'); // 메소드와 주소 설정
xhr.send(); // 요청 전송
// xhr.abort() // 전송된 요청 취소

JQuery를 사용한 코드

$.ajax({
  url: serverAddress, 
  type: 'GET',
  success: function onData(data){
    console.log(data);
  },
  error: function onError(error){
    console.error(error);
  }
});

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

장점

• response timeout(fetch에는 없는 기능)처리 방법이 존재
• promise 기반으로 만들어졌기 때문에 데이터 다루기가 편리
• 브라우저 호환성이 뛰어남

단점

• 사용을 위해 모듈 설치 필요

axios({
  method: 'post',
  url: 'https://localhost:8080/post',
  data: {
    userName: 'cube',
    userId: 'cube1234'
  }
}).then((response) => console.log(response));

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

장점

• 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없다.
• Promise 기반으로 만들어졌기 때문에 데이터 다루기가 편리하다.
• 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.

단점

• 지원하지 않는 브라우저가 존재한다.
• 네트워크 에러 발생시 response timeout 이 없어 기다려야 한다.
• JSON 으로 변환해주는 과정이 필요하다.
• 상대적으로 aaxios 에 비해 기능이 부족하다.

fetch("https://localhost:8080/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    userName: "cube",
    userId: "cube1234",
  }),
}).then((response) => console.log(response));