Javascript - axios vs fetch vs ajax

 

Javascript에서 클라이언트와 서버 간 데이터를 주고받기 위해 사용되는 비동기 HTTP 통신 방식으로는 대표적으로 fetch, axios, ajax 등이 있다.

 

이들의 공통점과 차이점을 알아보자.

 

 

fetch

별도의 설치 없이 모던 브라우저에서 사용 가능

POST, PUT 요청의 경우에는 body에 데이터를 실어 보냄

fetch(`/payload`, {
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pname })
    }).then(res => {
    	// ...
    })

 

단점

- IE에서는 지원하지 않으므로 polyfill 주입 필요 (chrome 42+, firefox 39+, edge 14+, safari 10.1+ 에서 지원)

- timeout을 설정할 수 없음 → 별도로 AbortController 객체를 생성하여 timeout을 구현하거나 custom Fetch를 구현하여 사용해야 함

- 요청 취소 불가

- body에 데이터 전달 시 JSON.stringify()로 변환하여 전달 + 결과값에서 json 형태의 값을 받아오려면 .json() 키워드로 변환하는 과정 필요

 

axios

폭 넓은 브라우저 호환성 제공(IE 등 구형 브라우저에서도 작동)

POST, PUT 요청의 경우에는 data에 데이터를 실어 보냄

(fetch에서는 제공하지 않는) timeout을 설정할 수 있음

결과 데이터를 json으로 자동으로 변환해줌

요청 취소(request aborting) 가능

요청 직전 혹은 then이나 catch 처리 직전에 인터셉터를 사용한 가로채기 가능

axios.post('/payload',
  headers : { 'Content-Type' : 'application/json' },
  data : { pname }
)

 

단점

- 별도의 라이브러리를 설치해야 함

 

 

fetch와 axios는 둘 다 Promise 기반이므로 then과 catch 메소드를 사용하여 실행 흐름 조절과 예외 처리를 할 수 있다.

둘의 차이점을 표로 정리했다.

	axios	fetch
브라우저 지원	O	일부 지원
요청 취소	O	X
데이터 전송	data 속성 사용	body 속성 사용 (문자열화하여 전달해야 함)
결과 데이터 자동변환	O	X (.json()으로 변환해야 함)
XSRF 보호	O	X
설치	필요 O	필요 X
인터셉터 사용	가능	불가
다운로드 progress	가능	불가

 

ajax

jQuery에서 제공하는 $.ajax 메소드로 손쉽게 사용 가능

success, error, complete 등 각 상태를 반환할 때 적절한 실행 흐름 조절 가능

dataType을 설정하여 자동 변환 가능

$.ajax({
  url: '/payload',
  type: 'get',
  dataType: 'json',
  data: { pname },
  timeout: 3000
})

 

단점

- Promise가 아닌 XMLHttpRequest(XHR) 기반이므로 then과 catch 메소드를 사용할 수 없다.