요청 구성
엔드포인트, HTTP method, headers, body, credentials 옵션을 요청 목적에 맞춰 고정한다.
응답 수신
fetch는 HTTP 404나 500에서도 reject하지 않으므로 status를 확인한다.
본문 파싱
Content-Type에 맞춰 json, text, blob 등으로 body를 읽는다.
상태 반영
로딩, 성공, validation 오류, 네트워크 오류를 화면에서 구분한다.
GET
데이터 조회
query string과 cache 정책을 함께 고려
body를 보내지 않는 것이 일반적
POST
상태 변경
JSON body와 CSRF·인증 정책 확인
중복 제출 방지
credentials
쿠키 전송
same-origin, include 설정으로 쿠키 포함 여부 결정
CORS와 함께 작동
AbortController
요청 취소
검색어 변경, 화면 이탈 시 이전 요청 중단
race condition 감소
상태 코드 · 타임아웃 · 인증 정보 점검
Fetch 오류 분기
const res = await fetch('/api/todos');
if (!res.ok) throw new Error(`HTTP ${res.status
overflow-wrap: break-word;
word-break: keep-all;
}`);
const todos = await res.json();