Fetch API는 JavaScript에서 HTTP 요청을 보내고 응답을 처리하는 인터페이스다. fetch()는 Promise를 반환하며, 응답 객체를 통해 상태 코드와 헤더, 본문을 읽을 수 있다. 문서 검색 결과나 저장 요청처럼 웹 화면과 서버를 연결하는 데 사용된다.
응답과 본문 읽기
요청이 완료되면 Response 객체를 받으며, JSON이나 텍스트 등 필요한 형태로 본문을 읽는다. 응답이 도착한 시점과 본문 처리가 끝난 시점은 구분된다. 다음은 성공 상태를 먼저 확인하는 예시다.
const response = await fetch('/api/articles');
if (!response.ok) throw new Error('문서를 가져오지 못했습니다.');
const articles = await response.json();
실제 화면에서는 오류가 나더라도 입력을 유지하고 재시도할 수 있게 처리한다. 외부 데이터가 원하는 JSON 구조인지도 별도로 확인해야 한다.
HTTP 오류와 네트워크 오류
404나 500 응답을 받았다는 이유만으로 fetch의 Promise가 자동으로 거부되는 것은 아니다. 상태 코드를 확인하는 단계가 필요하다. 반면 일부 네트워크 실패나 요청 취소는 오류 처리 경로로 이어진다. 모든 실패를 “인터넷 연결 없음”으로 표시하면 권한이나 서버 문제를 오해하게 만들 수 있다.
취소와 요청 순서
검색어가 빠르게 바뀌면 먼저 보낸 요청이 더 늦게 도착할 수 있다. AbortController로 불필요한 요청을 취소하거나 현재 요청 식별자를 비교해 오래된 결과가 화면을 덮어쓰지 않게 한다. 서버가 이미 수행한 변경은 브라우저에서 요청을 취소했다고 반드시 취소되는 것은 아니다. 저장 작업에서는 중복 실행을 막는 별도 설계가 필요하다. 관련 공식 설명.
출처와 자격 증명
다른 출처로 요청할 때는 CORS 응답 조건을 충족해야 한다. no-cors 옵션은 읽기 제한을 없애는 만능 해결책이 아니다. 쿠키를 포함하는 요청도 자격 증명 옵션과 서버 설정을 함께 확인한다. 서비스 워커가 응답을 제공할 수 있으므로 디버깅할 때 네트워크 서버의 응답인지 캐시된 응답인지 구분하는 것이 좋다.
참고: 공식 개발 문서.