728x90
Axios
- Axios는 node.js와 브라우저를 위한 HTTP 통신 라이브러리이다.
- 비동기로 HTTP 통신을 가능하게 해주며, return을 promise 객체(json형식)으로 해주기 때문에 res데이터를 다루기 쉽다.
- axios가 제공하는 추가기능
- 브라우저와 node환경에서 사용이 가능 : 서버 측과 클라이언트 측에서 동일한 코드를 사용하여 HTTP 요청을 처리할 수 있다는 것을 의미한다.
- 요청과 응답 인터셉트 : 요청과 응답을 인터셉트하여 변형하거나 추가적인 로직을 수행할 수 있는 기능을 제공한다.
- 오류처리 : HTTP 상태 코드에 기반하여 자동으로 오류를 처리하는 기능을 제공한다.
- 요청취소 : 중단된 요청에 대한 리소스 낭비를 줄이고 응답이 필요 없는 경우에 요청을 취소할 수 있다.
- 데이터변환 : 응답 및 데이터를 자동으로 변환하는 기능을 제공. JSON 데이터를 자동으로 객체로 변환하거나 FormData로 직렬화 등의 작업 수행 가능
Fetch
- ES6부터 들어온 JS 내장 라이브러리
- Promise 기반으로 만들어져 데이터를 다루기 쉽고 내장 라이브러리라는 장점이 있다.
- 브라우저에서만 사용이 가능하다.
- axios보다 가벼운 API로 간단한 처리하는데 적합하다.
- 하지만 몇가지의 단점이 존재한다.
- 지원하지 않는 브라우저가 존재(IE11 등..)
- 네트워크 에러 발생 시 response timeout이 없어 기다려야 함
- JSON으로 변환해주는 과정이 필요
- 따라서 상대적으로 axios에 비해 기능이 부족하다.
Axios와 Fetch의 차이점
| Axios | Fetch |
| 요청 객체에 url이 있다. | 요청 객체에 url이 없다. |
| 써드파티 라이브러리로 설치 필요 npm install axios |
Built-in APIs 로 별도의 설치 필요 없이, 모던 브라우저에서 사용 가능 |
| wide browser 지원 | 오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원. polyfill 이용해서 하위 호환성 지원 가능 |
| XSRF Protection 보안 기능 제공 | 없음. |
| 자동 JSON 데이터 변환 지원 | JSON 데이터 핸들링 위해 추가 절차 필요. Fetch interface 의 json() 이용하는 로직 추가하여 가능 |
| Request 취소 와 Request Timeout 설정 가능 | 없음. AbortController 이용하여 구현 가능 |
| HTTP Requests 의 Intercept 가능 | Intercept Requests 기본적으로 제공되지 않음. Global Fetch Method를 Overwrite 하여 나의 인터셉터 정의 가능 |
| Download Progress 지원 |
Upload Progress 지원안함. Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이용 가능 |
Axios와 Fetch 중 사용하려면?
자동으로 JSON 형식으로 변환이 가능하고, 차이점에서 확인한대로 추가적인 기능을 더 많이 재공하고 있는 axios를 사용하는 것이 설계하기 더욱 쉬운방법이 될 수 있을 것이라고 생각한다.
Axios 사용 예시
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const MyComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
// axios를 사용하여 API 요청을 보냅니다.
const response = await axios.get('https://api.example.com/data');
// 응답 데이터를 받아와서 상태를 업데이트합니다.
setData(response.data);
} catch (error) {
// 오류가 발생한 경우, 오류 처리를 수행합니다.
console.error('Error fetching data:', error);
}
};
fetchData(); // 데이터를 가져오는 함수를 호출합니다.
}, []);
return (
<div>
{data ? (
<ul>
{/* 데이터를 반복하여 리스트 아이템을 렌더링합니다. */}
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>Loading data...</p>
)}
</div>
);
};
export default MyComponent;
728x90