Fetch 요청을 상태 코드와 본문 파싱으로 나누기

요청 구성

URL, method, header, body, credential 정책을 명시한다.

404와 500도 fetch promise 자체는 resolve될 수 있어 status를 확인한다.

Content-Type에 맞춰 json이나 text로 읽고 파싱 실패를 처리한다.

로딩, 성공, 오류, 취소 상태를 UI 상태와 연결한다.

GET

조회 query string과 cache 정책을 함께 고려

body를 보내지 않는 것이 일반적

POST

상태 변경 JSON body, CSRF, 인증 정책이 필요

중복 제출 방지

credentials

쿠키 전송 same-origin 또는 include로 쿠키 포함 여부 결정

CORS와 함께 봄

AbortController

취소 검색어 변경이나 화면 이탈 시 이전 요청 중단

race 감소

status response.ok와 오류 body를 함께 확인한다.

timeout 긴 요청을 무한 로딩으로 두지 않는다.

최신성 이전 응답이 새 화면을 덮지 않는다.

credential 쿠키 인증이면 CORS와 SameSite를 함께 본다.