ejs,express,mongodb로 토이프로젝트를 하며 ajax와 fetch를 사용중인데, 차이점이 뭐지? 왜 각각 사용하고있었지 난? 이런 생각에 생각정리겸 작성합니다.
https://cocoon1787.tistory.com/756 이곳에서 99%의카피와 1%의 자기 생각을통해 작성한 글입니다.

참고로, form태그로 전송시 새로고침해주지만 ,아래기술들로하면 새로고침이안되고 전송이됨

Ajax

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

Ajax 장점

• Jquery를 통해 쉽게 구현 가능하다.
• Error,Success, Complete의 상태를 통해 실행 흐름 조절 가능하다.

Ajax 단점

• Jquery를 사용해야 간편하고 호환성이 보장된다.
• - Promise 기반이 아니다.
  - .done(), .fail()를 사용 할 수 있으니 promise기반이지않나 싶다..

Ajax XMLHttpRequest(XHR)를 사용한 코드

var xhr = new XMLHttpRequest();
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:3000'); // 메소드와 주소 설정
xhr.send(); // 요청 전송 
// xhr.abort(); // 전송된 요청 취소

ajax Jquery를 사용한 코드

var serverAddress = 'https://localhost:3000';

// jQuery의 .get 메소드 사용
$.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 데이터를 다루기 쉽다.
• JSON -> object/array 변환작업을 자동으로 해준다. (서버에서 받아온 json데이터를 자동으로 변환해준다는 얘기)

axios 장점

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

axios 단점

• 사용을 위해 모듈 설치가 필요하다. (npm install axios)

axios 코드

axios({
  method: 'post',
  url: 'https://localhost:3000/user',
  data: {
    userName: 'Cocoon',
    userId: 'co1234'
  }
}).then((response) => console.log(response));

fetch

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

fetch 장점

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

fetch 단점

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

fetch 코드

fetch("https://localhost:3000/user/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "asd123",
    description: "hello world",
  }),
}).then((response) => console.log(response));

요약

간단한 통신의 경우엔 fetch를 사용하고 기능이 좀 더 필요하다면 axios를 사용하는 게 좋아 보임.
하지만 React-Native와 같이 업데이트가 잦은 경우에는 fetch가 내장 라이브러리이기 때문에 좀 더 안정적일 수도 있겠다고 생각됨.

추가로, fetch는 body폼으로 넘겨줘야함