[개발지식] AJAX 요청 쉽게 하기! Axios vs Fetch 완벽 비교

[개발지식] AJAX 요청 쉽게 하기! Axios vs Fetch 완벽 비교

 

📌 AJAX

(Asynchronous JavaScript and XML)

 

- 자바스크립트를 이용하여 XML(혹은 json) 데이터를 주고받는 기술
- 백그라운드 영역에서 GET/POST 요청하여 서버와 통신
- 비동기식으로 처리하기 때문에 서버와 통신하는 동안 다른 작업도 가능 
  (웹페이지 재로딩 필요 X)

 

 

 

AJAX로 GET/POST 요청하는 법

1. axios 외부 라이브러리 사용
2. fetch() 문법 사용 (최신)
XMLHttpRequest 문법 사용 (구식)

 

 

1. axios 외부 라이브러리 사용

 

npm에서 설치 시

npm install axios 

 

GET 요청 수행하기

import axios from "axios";

 axios.get('통신할 데이터 URL').then((결과)=>{
        console.log(결과.data)
      })
      .catch((에러)=>{
        console.log(에러)
      })

 

POST 요청 수행하기

import axios from "axios";

axios.post('URL', {키 : '값'})

 

📃 axios 공식문서
아주 친절히 설명되어 있다! 각종 요청 메소드 명령어, API 등 알 수 있음!

 

2. fetch( ) 문법 사용

fetch('통신할 데이터 URL').then(응답 => 응답.json()).then((결과) => { console.log(결과) })

 

---

axios 🆚 fetch

 

[추가 설치 및 라이브러리 import]

axios : 필요 (외부 라이브러리임)

npm install axios 

import axios from "axios"

fetch : 불필요 (모던 브라우저에 내장되어 있음)

[데이터 출력 형태]

axios : array/object
fetch : string

 

🙋‍♀️ 부연설명
서버와 통신할 때는 type이 문자열인 자료만 가능. array/object는 불가능.
JSON은 "문자"로 취급되어 통신이 가능
JSON = "{ "키" : "값" }"
axios는 JSON array/object 형태로 자동전환 해줌
fetch는 그런거 없음. 따로 문자열로 파싱해야함

 

 

[브라우저 지원]

axios : 모든 브라우저
fetch : 오페라 미니 등 지원X
(지원되지 않는 브라우저에서 코드가 실행되면 polyfill이 대신 활성화되어 동작한다.
하위 호환성 지원 polyfill 코드 )

[보안 기능 제공]

axios : XSRF Protection 보안 기능 제공

 

XSRF
웹사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하도록 공격하는 것

 

 

fetch : 없음

[에러확인 방법]

axios : .catch() 사용하여 에러 처리
fetch : .then 절 실행

[요청 취소]

비교를 위해 응답시간 초과 시 요청취소가 어떻게 진행되는지 보자
axios : Timeout으로 설정 가능

//요청이 3초 이상 걸릴 경우, 종료 후 console창에 에러 출력
axios.get("URL", {
    timeout: 3000, // 기본 설정 '0'
  })
  .then((결과) => console.log(결과.data))
  .catch((에러) => {
    console.log(에러);
  });

 

fetch : AbortController 이용하여 구현 가능

//3초이내 응답 없으면 작업 종료
const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => controller.abort(), 3000);

fetch(URL, {
  signal: signal,
})
  .then((응답) => 응답.json())
  .then((결과) => { console.log(결과) })
 .catch((에러) => {
    console.error(에러);
  });

 

 

---

 

마치며

 

라이브러리를 사용하느냐 직접 구현하느냐의 차이인데
실무에서는 개발규모와 일정에 따라 라이브러리의 사용여부를 결정하는 듯하다.
라이브러리 특성 상 잦은 버전 업데이트로 대응 이슈도 문제고
용량도 크기 때문에 그에 따라 번들링 크기도 커짐을 고려해야한다.
또 간단한 기능 구현을 위해서 굳이 라이브러리를 사용할 필요도 없어보인다.
실무에서는 axios 인터셉터 외엔 별 다른 장점이 없다고 본다는 의견도 있다고 한다.
axios 인터셉터 사용법
(오 이거 재밌어 보임 나중에 써보고 포스팅해야겠다 ㅎㅎ)

나 처럼 혼자 개인프로젝트를 만드는 상황이라면 개인의 사용 편의성에 맞춰 선택하면 될 듯하다.
개인적으로는 axios의 코드가 더 간결하고 보안기능 제공이 장점으로 봤는데
실무에서는 다양한 의견이 있으니,,

⚠️ react-native의 경우 잦은 버전 업데이트로 인해 아직 안정화된 프레임워크가 아니라, fetch를 사용하는것이 좋다고 한다. axios 와 같은 외부 라이브러리가 지속되는 업데이트를 따라가지 못하는 경우가 있다