Этап 5 из 19 · ≈ 6 ч

Работа с сетью — fetch и REST

Основа с Junior

Запросы к серверу из браузера — fetch, JSON, обработка ошибок, отмена, CORS.

async function loadOrder(id, signal) {
  const res = await fetch(`/api/orders/${id}`, { signal, headers: { Accept: "application/json" } });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);   // fetch не бросает на 4xx/5xx
  return res.json();
}
const ctrl = new AbortController();
loadOrder(42, ctrl.signal);
ctrl.abort();   // например, при уходе со страницы

Что важно знать

  • fetch отклоняет промис только при сетевой ошибке; коды 4xx и 5xx нужно проверять через res.ok.
  • Отправка JSON: method: "POST", body: JSON.stringify(data), заголовок Content-Type: application/json.
  • CORS: запрос на другой домен браузер разрешит, только если сервер ответил нужными заголовками; «непростые» запросы предваряются preflight OPTIONS. Это защита браузера, а не сервера.
  • Cookies на другой домен — credentials: "include" и согласие сервера.
  • Состояния загрузки и ошибки, повторы с паузой, гонки ответов (старый ответ пришёл позже нового) — отмена через AbortController.
  • В приложениях серверное состояние обычно ведут библиотеки вроде TanStack Query: кэш, повторы, обновление в фоне.

Критерии освоения

Junior ≈ 6 ч

  • Делает запросы через fetch, проверяет res.ok и показывает состояния загрузки и ошибки
  • Объясняет CORS и почему ошибка CORS — настройка сервера

Практика. Сделать страницу, которая загружает данные из публичного API с состояниями загрузки, пустого результата и ошибки.

Middle ≈ 4 ч

  • Отменяет запросы при уходе со страницы и обрабатывает повторы и таймауты
  • Работает с cookies на другом домене и понимает preflight

Практика. Написать обёртку над fetch с таймаутом, повтором, отменой и типизацией ответа.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Что такое CSRF и как он связан с CORS?Middle

CSRF — чужой сайт заставляет браузер жертвы отправить запрос на ваш сайт; браузер сам приложит cookie, и запрос выполнится от имени пользователя. CORS — правила, когда скрипт с одного домена может читать ответы другого.

Полный разбор
Какие HTTP-методы вы знаете? Чем GET отличается от POST?Junior

GET — получить данные, POST — создать или отправить, PUT — заменить целиком, PATCH — изменить частично, DELETE — удалить.

Полный разбор
Какие изменения REST API обратно совместимы для существующих клиентов?Middle

Добавлять можно (новое необязательное поле в ответе, новый эндпоинт, новый необязательный параметр); удалять, переименовывать, менять тип и ужесточать — нельзя.

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

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

Полный разбор
Что такое Promise и чем отличаются Promise.all, allSettled, race и any?Junior

Promise — объект будущего результата в одном из состояний: pending, fulfilled, rejected; состояние меняется один раз. then/catch/finally возвращают новый промис — получаются цепочки. all — все успешны или первая ошибка; allSettled — дождаться всех и получить…

Полный разбор
Как работают async и await и как правильно обрабатывать в них ошибки?Junior

async-функция всегда возвращает Promise; await приостанавливает её до завершения промиса, не блокируя поток (продолжение — микрозадача). Ошибки ловят обычным try/catch. Независимые запросы запускают одновременно: сначала создать промисы, потом await…

Полный разбор
Когда фронтенду нужен REST, GraphQL или WebSocket?Middle

REST — ресурсы и HTTP-методы: просто, кэшируется HTTP, хватает для большинства приложений. GraphQL — клиент сам описывает нужные поля одним запросом: удобно при множестве экранов с разными данными и нескольких клиентах, но сложнее кэширование и защита от…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

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

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

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

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