Axios | Notion

Fetch와 Axios의 차이점

기능	Fetch	Axios
요청 전/후 처리	직접 작성 필요	Interceptor 지원
JSON 자동 변환	`.json()` 호출 필요	자동 변환
에러 처리	상태 코드 기반 직접 구현 필요	자동으로 에러 핸들링
요청 중단 (Cancel)	AbortController 필요	기본 제공 (`axios.CancelToken`)
기본 URL 설정	없음	지원 (`axios.create`)
동시 요청 처리	`Promise.all` 사용	더 직관적이고 내장된 기능

fetch 예제

const userData = { email: "[email protected]", password: "1234" };

const response = await fetch("<https://api.example.com/auth/login>", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(userData),
});

if (!response.ok) {
  throw new Error(`HTTP 에러: ${response.status}`);
}

const data = await response.json();
console.log("성공:", data.accessToken);

axios 예제

const userData = { email: "[email protected]", password: "1234" };

const response = await axios.post("<https://api.example.com/auth/login>", userData);

console.log("성공:", response.data.accessToken);

설치하기

npm install axios
yarn add axios