XMLHttpRequest vs fetch API vs axios

Southbig·2022년 8월 23일
0

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 의 장점 단점도 기술해주시면 좋을 것 같아요!

답글 달기