Ajax와 Fetch와 Axios 차이점 비교해보기

 

작업을 하다보면,

클라이언트와 서버간의 데이터를 주고 받기 위해서

HTTP 통신을 하게 된다.

 

비동기 HTTP 통신에 쓰이는 

Ajax, Axios, Fetch 의 차이점을 알아볼거다

 

 

일단 먼저

Ajax

Asyncchronous Javascript And XML 의 약자이다.

약자대로 javascript 를 사용한 비동기 HTTP 통신 기술이다.

 

비동기적으로 통신으로 인해 페이지전체를 로딩하지 않고, 

일부분만 갱신 할 수 있다. 

 

통신이란 response 와 request 를 비동기로 다룰 수 있다는 것이다.

 

그리고 ajax가 jquery 와 묶여서 불리는 경우가 많다. 나 또한 처음에 그랬다.

근데 잘못된것이였다.  

 

ajax 를 더 편리하게 jquery로 사용함으로써 묶어서 말 할때가 많은 것 뿐.

그래서 jquert 의 인기가 순간 급부상하게 됬었던 것이다. 돔 컨트롤하기도 간편하고 등..

 

 

바닐라 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 를 활용한 코드가 보기편하고 간단해졌다. 

브라우저 간의 호환성에서도 용이하다.

 

 

Fetch

ES6 부터 들어고게 된 Javascript 내장 라이브러리이다.

Promise 기반으로 만들어졌다.

 

//fetch
const url ='/user/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
    name:'seon geon',
    age:32
  })

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

 

Fetch의 장점

내장라이브러리라서 별도의 설치(import)가 필요가 없고 업데이트에 따른 에러가 방지가 다능하다.

Promise 기반이라서 데이터 다루기 편리하다.

 

Fetch의 단점

지원하지 않는 브라우저가 있다 (IE11)

네트워크 에러 발생 시 timeout 옵션이 없어 기다려야 한다.

JSON 으로 변환을 해주어야 하는 과정이 생긴다.

Axios 의 비해서 기능들이 부족하다.

 

 

Axios 

다음은 Axios 를 사용한 통신 코드이다.

axios({
  method: 'post',
  url: '/user/test',
  data: {
    name: 'seongeon',
    age: 'yu'
  }
});

 

이번 기회에 axios 를 알게 되었는데

Axios의 장점은

fetch 보다 훨씬 쓰기가 편하고 기능(옵션)들이 많이 들어있다.

JSON 변환 과정도 빠져서 편리한거 같다.

크로스 호화성도 좋다.

 

Axios의 단점은

내장라이브러러리가 아니라서 사용을 위해서는 설치가 필요하다.

 

 

 

Fetch와 Axios 를 비교한 테이블이미지이다.

 

출처 https://tlsdnjs12.tistory.com/26