foundation

Fetch API

Используйте promises, request и response, streams, AbortController, credentials, поведение CORS и обработку ошибок.

fetch возвращает promise с HTTP response; сетевые сбои reject, но коды 4xx/5xx всё равно resolve. Хорошая практика: response.ok, обработка ошибок JSON, AbortController для отмены и таймаутов, понимание credentials и того, что CORS навязывает браузер вокруг запроса.

					const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 8000);

try {
  const response = await fetch('/api/items', {
    signal: controller.signal,
    credentials: 'same-origin',
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return await response.json();
} finally {
  clearTimeout(timer);
}
				

Отделяйте transport errors (reject) от прикладных (4xx/5xx при ok false). CORS-сбои выглядят как сетевые ошибки без читаемого cross-origin body.

На интервью: отмена устаревших запросов, transport vs application errors и симптомы CORS.

Типовые ошибки: ожидание reject на 404; забытые credentials или headers меняют auth и preflight.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

  • response.ok до парсинга.
  • Ошибки JSON и abort.
  • AbortController при навигации и debounce.
  • Связь credentials и CORS.