알토르 3주차 - Fetch / Axios

Fetch / Axios

1️⃣ 기본 개념

항목fetchaxios

타입	브라우저 내장 API	JS 라이브러리 (npm install axios 필요)
언어 지원	Promise 기반	Promise 기반
설치	불필요 (브라우저 내장)	필요 (npm install axios)
환경	브라우저, Node.js(별도 설정 필요/ v18 이상)	브라우저 + Node.js 모두 지원
HTTP 메서드	모두 지원	모두 지원
반환 값	Promise -> res.json() 별도 호출 필요	Promise -> 자동 JSON 파싱 가능

2️⃣ 요청 방식

• fetch:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

• axios:

import axios from 'axios';

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

✅ 차이점:

fetch는 body를 직접 JSON.stringify 해야 하고, response.json() 호출이 필요

axios는 JSON 데이터 자동 변환, response.data로 바로 사용 가능

3️⃣ 에러 처리

fetch는 HTTP 오류 코드도 catch로 잡히지 않습니다.
→ 상태 코드를 확인하고 직접 처리해야 합니다.

fetch('/api')
  .then(res => {
    if (!res.ok) throw new Error('Network response was not ok');
    return res.json(); //// 호출 필요
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

• JSON 자동 파싱 안 함 → res.json() 호출 필요
• HTTP 오류 상태 코드(400, 500 등)도 reject되지 않고 resolve됨 → 직접 처리 필요

axios는 HTTP 오류 상태 코드를 자동으로 catch로 전달합니다.

axios.get('/api')
  .then(res => console.log(res.data))
  .catch(err => console.error(err)); // 404, 500 등 모두 잡힘

• JSON 자동 파싱 (res.data)
• HTTP 오류 상태 코드도 reject 처리 → catch로 잡기 쉬움
• 요청 헤더, 시간 초과(timeout), 인터셉터(interceptors) 등 기능이 풍부

4️⃣ 기능 차이

기능fetchaxios

요청 취소	AbortController 필요	CancelToken 제공
요청/응답 인터셉터	없음	있음
JSON 변환	수동 파싱 (res.json())	자동 파싱
에러 처리	resolve-> 직접 처리	reject -> catch에서 처리
타임아웃	직접 구현 필요	timeout 옵션 지원
XSRF	보호 없음	기본 제공 (xsrfCookieName,xsrfHeaderName)

5️⃣ 브라우저 & Node 지원

• fetch: 브라우저 내장. * Node.js에서는 node-fetch 설치 필요
• axios: 브라우저 + Node.js 모두 지원

🔹 요약

• 간단하고 브라우저 기본 내장 → fetch
• fetch는 브라우저 내장 API이고, 호출하면 Promise를 반환
• axios: 라이브러리, 내부적으로 Promise를 반환
• 편리한 기능, Node.js 지원, 에러/타임아웃 처리 용이 → axios

“실습용” → fetch
“프로젝트에서 안정적 API 통신” → axios

Promise란?

• JavaScript에서 비동기 작업을 처리하는 객체

pending (진행 중)

fulfilled (성공)

rejected (실패)

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("완료!"), 1000);
});

• then() → 성공 후 동작
• catch() → 실패 후 동작

2️⃣ fetch / axios 동작 방식

• fetch

fetch("https://api.example.com/data") // ① 요청 보내기
  .then(res => res.json())             // ② 응답 JSON 변환
  .then(data => console.log(data))     // ③ 데이터 사용
  .catch(err => console.error(err));   // ④ 에러 처리

• 흐름

1. fetch() → Promise 객체 반환 (pending)
2. 서버 응답 도착 → Promise fulfilled
3. .then()에서 응답을 JSON으로 변환 → 또 다른 Promise
4. 데이터 사용
5. 네트워크 오류나 HTTP 상태 코드 수동 확인 → .catch()에서 처리

• axios

axios.get("https://api.example.com/data")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

• 흐름

1. axios.get() → Promise 반환 (pending)
2. 서버 응답 도착 → Promise fulfilled
3. 자동으로 JSON 변환 → 바로 res.data 사용 가능
4. 네트워크 오류나 HTTP 상태 코드 에러 → 자동으로 catch로 전달

✅ 차이점: axios는 JSON 변환과 HTTP 오류 처리를 내부에서 해주기 때문에 코드가 간결함

항목fetchaxios

비동기	Promise	Promise
JSON 변환	수동 (res.json())	자동 (res.data)
HTTP 오류 처리	수동	자동
async/await 지원	✅	✅

• await는 Promise가 완료될 때까지 기다린다
• async 함수 안에서만 사용 가능
• 둘 다 Promise이므로 동일하게 사용 가능

용어의미

async/await	Promise 기반 코드지만 동기처럼 읽히도록 작성
Promise.then/catch	전통적인 Promise 처리 방식, 비동기처럼 보임