Fetch API
기본 정보
- 명칭: Fetch API
- 분류: JavaScript 웹 API
- 개발 주체: WHATWG
- 주요 용도: 서버와 비동기 HTTP 통신
- 지원 환경: 최신 브라우저, Node.js(일부 버전 이상)
- 관련 주제: #FetchAPI #AJAX #JavaScript #RESTAPI #JSON
개요
Fetch API는 JavaScript에서 HTTP 요청을 보내고 응답을 처리하기 위한 표준 웹 API이다.
기존 XMLHttpRequest보다 문법이 간결하고 Promise 기반으로 동작하며, async/await와 함께 사용하면 가독성이 높은 비동기 코드를 작성할 수 있다.
현재 React, Vue.js, Node.js 기반 프로젝트에서도 널리 사용되고 있다.
Fetch API 구조
사용자
↓
JavaScript
↓
Fetch API
↓
HTTP Request
↓
REST API
↓
Database
↓
JSON Response
↓
화면 출력동작 과정
버튼 클릭
↓
fetch()
↓
HTTP 요청
↓
서버 처리
↓
JSON 응답
↓
JavaScript 처리
↓
화면 갱신기본 문법
fetch("/api/users")
.then(response => response.json())
.then(data => {
console.log(data);
});GET 요청
fetch("/api/users")
.then(res => res.json())
.then(data => {
console.log(data);
});데이터를 조회할 때 사용한다.
POST 요청
fetch("/api/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name: "홍길동"
})
});데이터를 생성할 때 사용한다.
PUT 요청
fetch("/api/users/1", {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name: "김철수"
})
});전체 데이터를 수정할 때 사용한다.
PATCH 요청
fetch("/api/users/1", {
method: "PATCH",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
age: 31
})
});일부 데이터만 수정할 때 사용한다.
DELETE 요청
fetch("/api/users/1", {
method: "DELETE"
});데이터를 삭제할 때 사용한다.
async / await
async function loadUsers() {
const response =
await fetch("/api/users");
const data =
await response.json();
console.log(data);
}실무에서는 Promise 체인보다 async/await 방식이 많이 사용된다.
응답(Response)
const response =
await fetch("/api/users");대표 속성
| 속성 | 설명 |
|---|---|
| status | HTTP 상태 코드 |
| ok | 성공 여부 |
| headers | 응답 헤더 |
| body | 응답 본문 |
JSON 변환
const data =
await response.json();JSON 응답을 JavaScript 객체로 변환한다.
Text 변환
const text =
await response.text();문자열 응답을 받을 때 사용한다.
Blob 변환
const file =
await response.blob();이미지나 파일 다운로드에 활용된다.
에러 처리
try {
const response =
await fetch("/api/users");
} catch(error) {
console.log(error);
}네트워크 오류 등에 대비해 예외 처리를 구현하는 것이 좋다.
Authorization Header
JWT 인증 예시
fetch("/api/user", {
headers: {
Authorization:
"Bearer TOKEN"
}
});파일 업로드
const formData =
new FormData();
formData.append(
"file",
file
);
fetch(
"/upload",
{
method:"POST",
body:formData
}
);Content-Type은 브라우저가 자동 설정하므로 직접 지정하지 않는 것이 일반적이다.
쿠키 포함 요청
fetch(
"/api/user",
{
credentials:"include"
}
);Session 기반 인증에서 사용된다.
Fetch와 AJAX(XMLHttpRequest) 비교
| Fetch API | XMLHttpRequest |
|---|---|
| Promise 기반 | Callback 기반 |
| 문법 간결 | 코드가 복잡 |
| async/await 지원 | 지원 안 함 |
| 최신 표준 | 레거시 방식 |
| 신규 프로젝트 권장 | 기존 프로젝트 유지보수 |
Fetch와 Axios 비교
| Fetch API | Axios |
|---|---|
| 브라우저 내장 | 라이브러리 설치 필요 |
| 추가 설치 불필요 | 기능 풍부 |
| JSON 변환 직접 호출 | 자동 변환 |
| Timeout 직접 구현 | 기본 지원 |
| Interceptor 없음 | Interceptor 지원 |
대표 활용 분야
- 로그인
- 회원가입
- 게시판
- 쇼핑몰
- ERP
- 관리자 페이지
- SPA
- 모바일 웹
장점
- 브라우저 기본 제공
- Promise 기반
- async/await 사용 가능
- REST API와 잘 어울림
- 코드가 간결함
- 유지보수가 쉬움
단점
- HTTP 오류(404, 500)를 자동으로 예외 처리하지 않음
- Timeout 기능 내장 없음
- Interceptor 기능 없음
- 구형 브라우저에서는 지원 제한
실무 메모
실무에서는 다음과 같은 방식이 권장된다.
async/await사용try...catch로 예외 처리response.ok확인 후 처리- JWT는 Authorization Header 사용
- Session 인증은
credentials: "include"설정 - 공통 API 함수로 래핑하여 재사용
- AbortController로 요청 취소 기능 구현
- 응답 형식(
success,message,data) 표준화 - 로딩 상태 관리
- API 오류 로그 기록
Fetch API와 함께 사용하는 기술
대표 활용 사례
- React 데이터 조회
- Vue 관리자 페이지
- 게시글 등록
- 댓글 작성
- 로그인 인증
- 상품 목록 조회
- 파일 업로드
- 실시간 검색
관련 문서
출처
- MDN Web Docs - Fetch API
- WHATWG Fetch Standard
- JavaScript Fetch API Specification