axios 와 fetch 차이

• nextjs로 간단한 페이지 만들면서, api 호출 라이브러리로 사용되는 axios와 fetch에 대해 차이점이 무엇인지 궁금해졌다.
• HTTP 요청에 최적화 되어 있고 추상화도 잘 되어 있는 api 들이 생겨나기 시작했고 대표적으로 Axios 와 fetch가 있다.

axios

• node.js와 브라우저를 위한 HTTP 통신 라이브러리
• 비동기로 HTTP 통신을 가능하게 해주며 return을 prmoise 객체로 해주기 때문에, response 데이터도 다루기가 쉬움
• react를 사용하는 사람들은 fetch보다 axios를 많이 선호하는 편

axios({
	method: 'post',
    url: '/user/12345',
    data: {
    	firstName: 'Yongseong',
        lastName: 'Kim'
   	}
});

• 장점
  1. response timeout 처리 방법이 있음 (fetch에선 존재하지 않는 기능)
  2. promoise 기반으로 다루기 쉬움
  3. 크로스 브라우징에 신경을 많이썼기에 브라우저 호환성이 뛰어남
• 단점
  1. 모듈 설치를 해야함

fetch

• ES6부터 Javascript 내장 라이브러리로 들어와 상당히 편리
• promise 기반으로 만들어졌기에 Axios와 마찬가지로 데이터 다루는데, 어렵지 않음

const url = 'http://localhost:3000/test'
const option = {
	method: 'POST',
    header: {
    	'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8'
    },
    body: JSON.stringify({
    	name: 'sewon',
        age: 20
    })
    
fetch(url, options)
	.then(response => console.log(response))

• 장점
  1. 내장 라이브러리이기에 별도 import 해줄 필요 없음
  2. promise 기반으로 다루기 쉬움
  3. 내장 라이브러리이기에 사용하는 프레임워크가 안정적이지 않을 때, 사용하기 좋음
• 단점
  1. internet explorer 경우에 fetch를 지원하지 않는 버전 존재 (브라우저 호환성이 상대적으로 떨어짐)
  2. 기능 부족