Вопрос с собеседования · Frontend

Как сделать HTTP-запрос через fetch и правильно обработать ошибки?

JuniorБраузер и DOM
Ещё спрашивают так:
  • Почему fetch не бросает ошибку на 404?
  • Как отменить fetch?
Коротко

fetch(url, options) возвращает Promise ответа. Важно: промис отклоняется только при сетевой ошибке — на 404 и 500 он выполняется успешно, поэтому надо проверять response.ok или status. Тело читают await res.json() (тоже промис). Для POST — method, headers Content-Type и body JSON.stringify. Отмена и таймаут — AbortController / AbortSignal.timeout.

  • credentials: 'include' — отправить cookies на другой домен
  • Ошибки сети, HTTP и разбора JSON обрабатывать раздельно
  • Устаревшие запросы отменять, чтобы ответы не пришли не по порядку

Подробно

const res = await fetch('/api/orders', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(order),
  signal: AbortSignal.timeout(10000),
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();

Что хотят услышать

  • fetch не отклоняется на 4xx и 5xx.
  • Проверка ok и чтение json.
  • Отмена и таймаут.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗fetch отклоняет промис при ответе 404 или 500, поэтому проверять статус ответа вручную не нужно вовсе
  • ✗res.json() возвращает объект синхронно
  • ✗fetch нельзя отменить, можно только проигнорировать ответ
  • ✓Промис отклоняется только при сетевой ошибке — проверяют response.ok; отмена — AbortController

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования