Какие способы выполнения HTTP-запросов в браузере на JavaScript?

Что проверяют

Знаете ли вы не только названия, но и поведение: что fetch делает с ошибками, как отменять запросы, где до сих пор нужен XHR. Следом обычно спрашивают, чем axios лучше fetch и как избежать гонки ответов при быстром вводе в поиске.

Как отвечать

• fetch: стандарт на промисах, есть и в браузере, и в Node.js 18+. Ответ 4xx или 5xx промис не отклоняет, нужна проверка response.ok. Таймаута по умолчанию нет, отмена через AbortController или AbortSignal.timeout(ms). Куки на чужой домен уходят только с credentials: 'include', для запроса при закрытии страницы есть keepalive: true, тело можно читать потоком через response.body;
• XMLHttpRequest: колбэки и readyState, но это до сих пор единственный простой способ показать прогресс отправки файла через xhr.upload.onprogress;
• axios: в браузере работает поверх XHR, даёт интерцепторы, автоматический JSON, ошибку на ответ вне 2xx и отмену через тот же AbortController. Цена: зависимость в бандле. Лёгкие обёртки над fetch вроде ky или ofetch закрывают большую часть тех же удобств;
• navigator.sendBeacon: аналитика при уходе со страницы, ответ недоступен;
• WebSocket и EventSource: двусторонний канал и поток событий от сервера;
• декларативные запросы: <form>, <link rel="preload">, загрузка картинок и скриптов.

Сильный ответ добавляет уровень выше: в приложении запросы редко пишут голым fetch, их оборачивают TanStack Query, SWR или RTK Query. Они дают кэш, дедупликацию одинаковых запросов, повтор при ошибке и отмену устаревших ответов.

Где спотыкаются

Пишут fetch(url).then(r => r.json()) без проверки r.ok. Ответ 500 с HTML-страницей ошибки превращается в непонятную ошибку парсинга JSON.

Не отменяют запрос в useEffect или при смене параметров. Медленный старый ответ приходит после нового и перетирает актуальные данные.

Вручную ставят Content-Type: multipart/form-data при отправке FormData. Браузер уже не может дописать boundary, и сервер не разбирает тело. Заголовок нужно просто не указывать.