[서버요청] axios 그리고 fetch

로그인 기능을 구현하면서 서버와의 통신을 하기 위해 어떤 것을 사용할지 공부했었고 그 내용을 간단하게 정리해보려고 한다. 

 

Axios

axios.get('url')
.then((response) => {

	// Code for handling the response
})
.catch((error) => {

	// Code for handling the error
})

• 라이브러리: Axios는 별도의 라이브러리이며, 사용하기 위해서는 설치가 필요
• 브라우저 및 Node.js 지원: Axios는 브라우저와 Node.js 환경 모두에서 사용가능
• 자동 JSON 변환: 응답을 자동으로 JSON으로 변환, 응답 데이터는 응답 객체의 data 프로퍼티로 사용 가능
• 요청 취소: 요청을 취소하는 기능을 지원
• 인터셉터: 요청과 응답을 가로채어 추가적인 처리를 할 수 있는 인터셉터 기능을 제공
• 타임아웃 설정: 요청의 타임아웃을 설정 가능
• 에러 처리: HTTP 에러 상태 코드에 따라 자동으로 예외를 발생

Fetch

fetch('path-to-the-resource-to-be-fetched')
.then((response) => {

	// Code for handling the response
})
.catch((error) => {

	// Code for handling the error
});

• 내장 함수: Fetch는 현대 브라우저에 내장된 기능으로, 별도의 설치가 필요 없음
• 브라우저 한정 지원: 기본적으로 브라우저에서만 사용할 수 있으나, Node.js 환경에서는 'node-fetch'와 같은 패키지를 통해 사용 가능
• 수동 JSON 변환: 응답을 JSON으로 변환하기 위해 .json() 메소드를 명시적으로 호출해야 함
• 요청 취소 미지원: 기본적으로 요청 취소 기능을 지원하지 않음(AbortController를 통해 간접적으로 가능).
• 인터셉터 부재: 기본적으로 인터셉터 기능을 제공하지 않음
• 타임아웃 설정 부재: 기본적으로 타임아웃 설정 기능이 없음
• 에러 처리: 네트워크 오류가 아닌 경우, 비정상적인 HTTP 상태 코드에 대해서도 예외를 발생시키지 않음

 

간단하게 정리해보았다. 정리한 내용에서 알 수 있듯이 Axios가 요청에 대한 다양한 처리가 가능하다. 하지만 라이브러리를 사용하기 때문에 라이브러리 의존성을 줄이고 간단한 작업을 위해서라면 Fetch를 사용해도 충분하다. 언제나 그랬듯 진행하는 프로젝트의 규모와 요청의

복잡도에 따라 더 알맞은 것을 사용하면 될 듯하다.

 

나는 JSON 자동 변환, 에러 핸들링, 환경 호환성 등을 고려해 axios를 사용했다! 

 

📕Reference

https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/

Difference between Fetch and Axios.js for making http requests - GeeksforGeeks

https://www.meticulous.ai/blog/fetch-vs-axios