ajax / axios vs fetch

Debug-Life ·2023년 5월 7일

disk doctor 네트워크

disk doctor

목록 보기

2/9

요약

Ajax

Fetch & Axios

결론

1. 요약

ajax, axios, fetch 전부 클라이언트와 서버간의 데이터를 주고 받기 위한 비동기 통신 기술이다. promise 지원안함.

ajax : 백그라운드 영역에서 서버와 통신하여 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신이 가능. 동적인 웹 페이지에 적합
axios : 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 (동적 웹 페이지에 적합). 요청과 응답 데이터의 변형가능.
fetch : axios 와 거의 비슷하지만 조금 다르다. 라이브러리를 import 하지 않아도 사용가능. 잦은 업데이트 시 데이터 업데이트 속도가 axios보다 빠르다. axios보다 기능이 제한적이지만 가볍다. 자세한건 밑에서 서술

2. Ajax

Ajax란 Asynchronous JavaScript and XML의 약자.
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나다.

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신이 가능하다.

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있다.

JSON, XML, HTML, 텍스트 파일 등

Ajax의 장점

Ajax를 이용하면 다음과 같은 장점이 있다.

웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신가능.

웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.

웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.

백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

Ajax의 한계

Promise 기반이 아니기 때문에 then과 catch 메소드를 사용할 수 없다.

Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.

Ajax로는 바이너리 데이터를 보내거나 받을 수 없다.

Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.

클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.

클라이언트 풀링

클라이언트 풀링 (client pooling) 방식이란 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식을 의미합니다.
이에 반해 서버 푸시(server push) 방식이란 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것을 의미합니다.
요즘 많이들 사용하는 스마트 폰에서 각종 앱이 보내는 푸시 알림이 서버 푸시 방식의 대표적인 예입니다.

3. Fetch & Axios

Fetch 와 Axios 는 거의 비슷하다. 둘 다 API 연동/백엔드랑 프론트엔드 사이의 통신을 위해 사용되고, 개발자가 어떤 목적에 사용할지 입맛에 따라 자유롭게 취사 선택하면 된다. 각각의 문법은 여기서 서술하지 않고 특징과 장단점 위주로 서술하겠다.

특징

Axios

라이브러리 설치 필요

자동 JSON 변환

속도가 상대적으로 느림

자동 문자열 변환

상태코드가 범위를 넘어가면 거부

CSRF 보호 기능으로 상대적으로 보안에 유리하다.

다양한 브라우저에서 사용 가능.

Request 취소/ Request TimeOut 설정 가능

Fetch API

라이브러리 설치 필요없음

JSON 변환 필요

속도가 상대적으로 빠름

POST 요청 시 "JSON.stringfy()"를 사용하여 객체를 문자열 변환

HTTP 에러 응답 시, promise 거부 x, 네트워크 장애시만 거부

CSRF 보호 기능 없음

지원이 되지 않는 브라우저 있음

Request 취소/ Request TimeOut 설정 불가. AbortController를 이용해야함