자바스크립트 중급 #6 fetch API와 에러 처리

const response = await fetch('https://api.example.com/users');
const users = await response.json();
console.log(users);

await response.json();        // JSON 파싱
await response.text();        // 텍스트 그대로
await response.blob();        // 바이너리 (이미지/파일 등)
await response.arrayBuffer(); // ArrayBuffer (저수준)
await response.formData();    // FormData

try {
  const res = await fetch('/api/not-found');
  // 상태가 404 인데도 여기까지 옴
  console.log(res.status);   // 404
} catch (err) {
  // 네트워크 실패가 아니라면 안 들어옴
}

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

const res = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: '커티스', age: 30 }),
});

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

const formData = new FormData();
formData.append('name', '커티스');
formData.append('avatar', fileInput.files[0]);

const res = await fetch('/api/upload', {
  method: 'POST',
  body: formData,
  // Content-Type 은 일부러 안 적음 — 브라우저가 자동 설정
});

const token = localStorage.getItem('token');

const res = await fetch('/api/me', {
  headers: {
    'Authorization': `Bearer ${token}`,
  },
});

const res = await fetch('/api/me', {
  credentials: 'include',  // 다른 origin 에도 쿠키 보냄
});

const params = new URLSearchParams({
  q: '검색어 with spaces',
  page: '1',
  sort: 'date',
});

const res = await fetch(`/api/posts?${params}`);
// /api/posts?q=%EA%B2%80%EC%83%89%EC%96%B4+with+spaces&page=1&sort=date

const controller = new AbortController();

setTimeout(() => controller.abort(), 5000);   // 5초 뒤 취소

try {
  const res = await fetch('/api/slow', {
    signal: controller.signal,
  });
  console.log(await res.json());
} catch (err) {
  if (err.name === 'AbortError') {
    console.log('취소됨');
  } else {
    throw err;
  }
}

const res = await fetch('/api/slow', {
  signal: AbortSignal.timeout(5000),
});

function UserPage({ id }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch(`/api/users/${id}`, { signal: controller.signal })
      .then((r) => r.json())
      .then(setUser)
      .catch((err) => {
        if (err.name !== 'AbortError') console.error(err);
      });

    return () => controller.abort();   // cleanup
  }, [id]);

  // ...
}

const res = await fetch('/api/large');

for await (const chunk of res.body) {
  console.log(chunk);   // Uint8Array 조각
}

const res = await fetch('https://api.example.com/users');
const users = await res.json();

async function api(url, options = {}) {
  const res = await fetch(url, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...options.headers,
    },
  });

  if (!res.ok) {
    throw new Error(`HTTP ${res.status}: ${url}`);
  }

  return res.json();
}

// 사용처
const users = await api('/api/users');
const created = await api('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name: '커티스' }),
});