[JavaScript] fetch API: 현대 HTTP 클라이언트

js-fetch, fetch API, fetch, Response, Request

정의

fetch 는 Promise 기반의 표준 HTTP 클라이언트. XMLHttpRequest (2000) 를 대체.

기본 사용

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

POST + JSON

await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Alice' }),
});

함정 1: 4xx/5xx 는 reject 안 함

404, 500 도 fetch 는 성공 으로 봄. 반드시 res.ok 또는 res.status 검증.

const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);

함정 2: 스트리밍

응답 body 는 한 번만 소비 가능. .json(), .text(), .arrayBuffer() 중 하나만.

여러 번 필요하면 clone:

const res = await fetch(url);
const text = await res.clone().text();
const json = await res.json();

취소

AbortController 로:

const ctl = new AbortController();
fetch(url, { signal: ctl.signal });
setTimeout(() => ctl.abort(), 5000);

타임아웃

fetch(url, { signal: AbortSignal.timeout(5000) });

참고

• 관련 AbortController
• 관련 Promise
• 관련 HTTP/1.1