Fetch 요청/응답/실패

XHR에서 fetch로

콜백 중심 흐름을 Promise 기반 흐름으로 바꾸어 요청과 후속 처리를 조합하기 쉽게 만듭니다.

비동기

GET과 POST의 body 처리, JSON Content-Type, 쿠키 포함 여부를 명시해야 서버 계약과 맞습니다.

RequestInit

404나 500은 Promise reject가 아니라 정상 응답 객체이므로 response.ok를 직접 검사합니다.

상태 코드

AbortController, CORS 정책, credentials 옵션을 UI 수명 주기와 보안 요구에 맞춰 둡니다.

실전 경계

네트워크 실패

DNS, 연결 실패, CORS 차단은 reject catch에서 사용자에게 재시도나 연결 확인을 안내합니다.

transport

HTTP 오류

서버가 응답한 오류는 ok 검사로 분기 본문에 담긴 error code나 validation message를 함께 읽습니다.

application

인증 요청

쿠키 기반이면 credentials 옵션과 CORS 허용이 함께 필요 토큰 기반이면 Authorization 헤더와 갱신 전략을 따로 관리합니다.

auth

ok 검사 json 파싱 전에 status와 ok를 확인해 오류 응답을 정상 데이터처럼 쓰지 않습니다.

중복 클릭 같은 요청이 겹칠 수 있으면 취소, 비활성화, 최신 요청 우선 규칙을 둡니다.

CORS 프론트 코드만 보지 말고 서버의 Origin, Method, Header 허용을 같이 확인합니다.

const response = await fetch('/api/users');
if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}
const users = await response.json();