Ajax vs Fetch vs Axios

Ajax(Asynchronous JavaScript And XML)

• JavaScript를 사용한 비동기 통신
• XHR(XML HTTP Request)객체 사용
• 클라이언트와 서버간에 데이터를 주고받는 기술

장점

• JQuery를 사용할 경우, 코드가 간단하고 브라우저 호환성이 보장된다.
• 다중 요청이 가능하다.
• 취소 요청/진행 추적 가능

단점

• 작동하기 번거롭다.
• 중요한 크로스 도메인 문제가 있다.
• JSON 데이터를 처리하기 어렵다.

Fetch

• ES6부터 JavaScript의 내장 라이브러리
• 별도 import 가 필요 없다.
• Promise 기반
• 응답객체가 ok 속성을 포함하면 성공

장점

• Promise 기반으로 설계되어, 더 나은 가독성과 유지 보수성을 제공
• 크로스 도메인 요청 지원
• JSON 데이터 처리 편리
• headers, method, mode, cache 등 다양한 옵션

단점

• 호환성이 좋지 않다.(IE)
• 취소 요청/진행 추적 불가
• 네트워크 에러 발생시, 계속 기다려야 한다.

const url ='http://localhost:3000`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({})

  fetch(url,options)
  	.then(response => console.log(response))
 

Axios

• node.js와 브라우저를 위한 HTTP통신 라이브러리
• Promise 기반
• Promise 객체로 리턴, 자동으로 Json 변환
• response timeout 처리 방법이 있다.
• 브라우저 호환성이 좋다.
• react에서 fetch 보다 선호된다.
• status가 200이고, statusText가 ok 이면 성공

axios({
  method: 'post',
  url: '',
  data: {
  }
});

https://medium.com/@bin61615/javascript-fetch-vs-ajax-c3506187fd31