XMLHttpRequest vs fetch API vs axios

남이섬·2022년 8월 23일

AJAX

AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말한다, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것이며,
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다
AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다
이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다

AJAX 그 자체가 특정 기술은 아니며, 새로운 접근법을 설명하는 용어이다

Ajax의 약자를 토대로 본래 의미를 살펴보면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술

XMLHttpRequest

XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용한다
XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다
이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있다

Fetch API

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다
XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능하다

Axios VS Fetch

Axios

  • 장점
    • response timeout 처리 방법이 있다 (fetch에는 존재하지 않는 기능)
    • promise 기반으로 다루기가 쉽다
    • 크로스 브라우징에 신경을 많이썼기에 브라우저 호환성이 뛰어나다
  • 단점
    • 모듈 설치를 해줘야한다

fetch

  • 장점
    • 내장 라이브러리이기에 별도의 import를 해줄 필요가 없다
    • promise 기반으로 다루기가 쉽다
    • 내장 라이브러리이기에 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋다
  • 단점
    • internet explorer의 경우에는 fetch를 지원하지 않는 버전도 존재한다 (브라우저 호환성이 상대적으로 떨어진다)
    • 기능이 부족하다
profile
즐겁게 살자

1개의 댓글

comment-user-thumbnail
2023년 11월 1일

XMLHttpRequest 의 장점 단점도 기술해주시면 좋을 것 같아요!

답글 달기