fetch & axios

❓fetch API

- 자바스크립트의 내장 API로, 비동기 HTTP (Ajax) 요청을 생성하기 위해 사용. fetch 함수는 Promise 객체를 반환하며, 서버로부터 응답을 받으면 이 Promise는 Response 객체를 결과값으로 가짐

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

❓Axios

- Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js에서 모두 사용. fetch API보다 더 사용하기 쉽고 많은 기능 제공

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

---

❓❓fetch와 axios의 차이

1. 오류 처리

fetch는 요청이 네트워크 오류로 실패한 경우에만 예외를 발생시킴

axios는 HTTP 상태 코드가 오류를 나타내는 경우에도 거부된 Promise를 반환함

2. 데이터 형식

fetch에서는 응답 데이터를 수동으로 변환해야 함(예: response.json())

axios는 자동으로 JSON 데이터를 JavaScript 객체로 변환함

3. 요청 중단

fetch에서는 요청을 중단하기 위해 AbortController 인터페이스를 사용해야 함

axios는 요청을 중단하는 기능을 제공함

4. 프로그레스 바 & 응답 시간 제한

axios는 파일 업로드 진행률을 추적하는 데 사용할 수 있는 onUploadProgress와 onDownloadProgress 콜백을 제공

또한 axios는 요청에 대한 응답 시간 제한을 설정할 수 있음

5. 서버 측 렌더링

fetch는 기본적으로 브라우저 내장 API이므로 이를 위해 별도의 구현이 필요함

axios는 Node.js에서도 작동하므로 서버 측 렌더링을 지원함