[js] Ajax : fetch와 axios를 더한

 

이전까지 AJAX의 의미를 잘못 이해했던 것 같다..리액트를 이용하여 axios를 쓰는것이 습관 아닌 습관이 되다 보니

어느 순간 그냥 비동기 통신? 이런식으로 어림잡아 짐작했던 것 같다

 

AJAX란 Asynchronous JavaScript And XML의 약자로 js를 이용하여 웹 페이지 전체를 새로 고치지 않고도 서버와 데이터를 비동기적으로 주고받을 수 있게 하는 기술이다. 즉, 새로고침 없이 클라이언트와 서버 간에 데이터를 주고받는 비동기 http 통신 방법이다.

 

AJAX 실행순서

1. 요청 생성: JavaScript를 사용하여 XMLHttpRequest 객체를 생성
2. 서버 요청: 이 객체를 사용하여 서버에 데이터를 요청
3. 서버 응답: 서버는 요청을 처리하고 응답을 반환
4. 응답 처리: JavaScript가 서버의 응답을 받아서 필요한 부분을 업데이트

jQuery와 묶여서 불리는 경우가 많은데 기존부터 Ajax라는 기술은 있었지만 매우 지저분했기 때문에 jQuery가 나오면서 조금 쉽게 사용하게 되면서 그렇게 불리우게 되었다고 한다. 

 

 

그렇게 웹이 발전하면서 기존에는 XMLHttpRequest 방식이 불편한점이 있었다. XMLHttpRequest는 요청의 상태나 변경을 구독하기 위해 이벤트를 등록해야 했고, 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직을 작성하기가 어렵습니다. 이러한 문제를 해결하기 위해 Fetch API와 Axios 라이브러리가 등장했다

 

 

Fetch API

Fetch API는 Promise 기반으로 작동하여 코드가 간결하고 읽기 쉬우며, 기본적으로 JSON 처리를 지원한다.

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

 

Axios

axios는 더 나은 에러 처리와 다양한 기능을 제공하는 HTTP 클라이언트 라이브러리로, Promise 기반이며 요청 인터셉터, 요청 취소, JSON 자동 변환 등의 기능을 제공한다.

const axios = require('axios');

axios.get('https://api.example.com/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

 

 

 

 

그렇다면 무엇을 사용하는 것이 좋을까?

Fetch와 axios의 장단점을 비교해보자면 아래와 같다

	Fetch	Axios
장점	1) 브라우저 내장 2) 간결한 문법 3) Stream 처리: Fetch는 스트림 기반으로 데이터를 처리할 수 있어 대용량 파일을 다운로드하거나 업로드할 때 유리	1. 풍부한 기능: 요청 취소, JSON 자동 변환, 요청 및 응답 인터셉터, 자동 변환 등의 다양한 기능을 제공 2. 일관된 API: 클라이언트와 서버 양쪽에서 동일한 API를 사용 가능 3. 우수한 에러 처리: HTTP 오류 상태 코드를 자동으로 처리하며, 에러 메시지가 더 직관적 4. 타임아웃 및 취소 기능: 요청에 대한 타임아웃 및 취소 기능을 쉽게 설정 가능
단점	1) 에러 처리의 불편함: HTTP 오류 상태 코드(예: 404, 500)도 성공으로 간주,오류를 수동으로 처리 2) 기능 제한: 타임아웃, 요청 취소 등의 기능이 기본적으로 제공되지 않습니다. 이러한 기능을 구현하려면 추가적인 코드 작성이 필요 3) 브라우저 호환성: 오래된 브라우저에서는 Fetch가 지원되지 않을 수 있다	1. 추가 설치 필요: 별도의 라이브러리 설치가 필요 2. 페이로드 크기: Fetch보다 약간 더 무겁다

 

장, 단점을 확인해보니 fetch와 axios는 아래와 같이 상황에 맞게 사용하는 것이 좋을 듯 싶다

 

 

Fetch를 사용하는 것이 좋은 경우

• 간단한 요청: 간단한 GET 요청 등 기본적인 HTTP 요청을 수행할 때
• 브라우저 지원 환경: 최신 브라우저만을 대상으로 하는 애플리케이션에서
• 추가 라이브러리 사용을 피하고 싶을 때: 라이브러리 의존성을 최소화하고자 할 때

 

Axios를 사용하는 것이 좋은 경우

• 복잡한 요청 구성: 요청 취소, 타임아웃 설정, 요청 및 응답 인터셉터 등이 필요한 경우
• 브라우저와 서버 모두에서 사용: 클라이언트와 서버 양쪽에서 동일한 HTTP 클라이언트를 사용하고자 할 때
• 더 나은 에러 처리가 필요한 경우: HTTP 오류 상태 코드를 쉽게 처리하고자 할 때