Fetch vs Axios (feat. Ajax)

Ajax

Ajax는 Asynchronous JavaScript and XML의 약자로,
웹 페이지를 리로드하지 않고도 서버와 비동기적으로 데이터를 교환할 수 있는 기술이다

Ajax의 핵심은 비동기적으로 데이터를 교환하는 것이다
즉, 브라우저가 서버로 데이터 요청을 보낸 후에도 기다리는 동안 다른 작업을 계속할 수 있고
서버로부터 응답이 돌아오면 그때 해당 응답을 처리하게 된다

이를 통해 사용자 경험이 향상되며, 웹 페이지의 부분적인 업데이트가 가능하다

Fetch? Axios?

Fetch와 Axios는 모두 JavaScript 라이브러리이며, 둘 다 Ajax 기술을 사용하여 HTTP 요청을 보내는 데 사용된다

차이점

• 브라우저 호환성
  • fetch
    최신 브라우저에서 잘 작동하지만, Internet Explorer와 같은 일부 구형 브라우저에서는 지원되지 않음
  • axios
    모든 브라우저에서 작동
• 오류 처리
  • fetch
    네트워크 오류가 발생했을 때만 예외를 반환함
    즉, 서버가 404 또는 500 상태 코드를 반환하더라도 fetch는 그것을 성공적인 요청으로 간주
  • axios
    200 범위 외의 모든 HTTP 상태 코드를 오류로 간주
• 자동 변환
  • fetch
    수동으로 response.json()을 호출해야 함
  • axios
    자동으로 JSON 데이터를 JavaScript 객체로 변환
• 요청 취소
  • fetch
    아직 지원하지 않음
  • axios
    요청을 취소하는 기능 내장
• 시간 초과
  • fetch
    기능 제공하지 않음
  • axios
    요청 시간 초과를 설정하는 옵션 제공
• 보안
  • fetch
    기본적으로 이를 수행하지 않지만, credentials 옵션을 include로 설정하면 가능
  • axios
    CSRF(Cross-Site Request Forgery) 보호를 위해 서버에서 설정한 쿠키를 자동으로 보냄

즉, 어떤 라이브러리를 사용할지는 개발자의 요구 사항과 선호에 따라 결정하면 된다~

---

나는 사실 axios를 주로 사용해서 그게 편하다
근데 axios 사용한 이유가 없었다 그냥이었다 그냥
매번 미루다 오늘에서야 차이를 알아보았고 내가 작성한 것보다 더 많은 차이가 있겠지만
의미 있는 시간이 엇따~