Fetch API и работа с сетью

JavaScript fetch API — это современный, основанный на Promise Web API, встроенный в браузеры для выполнения HTTP и HTTPS-запросов из клиентского JavaScript, заменяющий устаревший XMLHttpRequest более чистым и компонуемым интерфейсом. Базовый вызов fetch() принимает URL и необязательный объект опций, задающий method, headers (например, Content-Type: application/json, Authorization: Bearer <token>) и body для POST/PUT-запросов, и возвращает Promise<Response>, разрешающийся при ответе сервера. Разбор тела ответа требует второго асинхронного шага через response.json(), response.text() или response.blob(), а обработка ошибок должна явно проверять response.ok, поскольку fetch отклоняет свой Promise только при сетевых сбоях, но не при HTTP-кодах ошибок вроде 404 или 500. В React-приложениях fetch API обычно оборачивается библиотеками получения данных (React Query с useQuery или SWR), которые добавляют кэширование, дедупликацию, фоновое обновление и типы TypeScript поверх того же базового fetch-примитива.

Как это работает

Fetch API и работа с сетью покрывает closures, hoisting, прототипные цепочки, event loop (microtasks vs macrotasks), модули (ESM import/export), iterators/generators, Symbol/Proxy/Reflect, GC, модель памяти runtime. Асинхронные паттерны: Promise.all/race/allSettled, AbortController для отмены, AsyncIterator + for await...of, Web Workers для параллелизма. Performance-примитивы: requestAnimationFrame, requestIdleCallback, IntersectionObserver.

Когда применять

Берите это после построения чего-то больше формы — closures объясняют, почему React-хуки ведут себя так; event loop объясняет, почему setTimeout срабатывает позже ожидаемого; AbortController нужен для отмены fetch, когда юзер уходит. Web Workers — только когда CPU-bound работа блокирует main thread (обработка изображений, парсинг большого JSON).

Типичные ошибки

Ловушки Fetch API и работа с сетью: closures над переменными цикла захватывают последнее значение (используйте let в цикле или forEach); утечки памяти от event-handler'ов, которые не сняли; over-engineering с Proxy/Reflect, когда хватит обычного объекта; race conditions в конкурентных promise (Promise.race — намеренно, не случайно); блокировка main thread синхронным тяжёлым compute.

Связанные понятия

• Продвинутый JavaScript
• Промисы и async/await
• ES-модули
• Прототипы и наследование