> Что такое fetch в JavaScript (JavaScript)

Короткий ответ

fetch - это встроенный в браузер метод для выполнения HTTP-запросов, возвращающий Promise. Он заменяет устаревший XMLHttpRequest и предоставляет более простой и гибкий интерфейс для работы с сетевыми запросами. fetch поддерживает все основные HTTP-методы (GET, POST, PUT, DELETE и другие) и работает с форматами данных, такими как JSON, FormData, Blob.

Подробное объяснение

fetch принимает обязательный аргумент - URL ресурса, и необязательный объект с настройками запроса (method, headers, body, mode, credentials и другие). Возвращает Promise, который разрешается объектом Response только при получении ответа от сервера, даже если статус ответа - 4xx или 5xx. Для обработки ошибок сети (например, отсутствие соединения) нужно использовать catch.

Response предоставляет методы для чтения тела ответа в разных форматах: .json(), .text(), .blob(), .formData(), .arrayBuffer(). Эти методы также возвращают Promise. Важно: тело ответа можно прочитать только один раз.

На практике

fetch используется для взаимодействия с REST API, загрузки данных с сервера, отправки форм, работы с файлами. Основные сценарии:

• получение списка пользователей с сервера
• отправка данных формы на бэкенд
• загрузка изображения или другого файла
• работа с аутентификацией через заголовки

Пример кода

JAVASCRIPT
// GET-запрос
fetch('https://api.example.com/users')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

// POST-запрос с JSON
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Иван', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log('Успешно:', data))
  .catch(error => console.error('Ошибка:', error));

Как отвечать на собеседовании

Начни с определения: fetch - это современный способ делать HTTP-запросы в браузере. Упомяни, что он возвращает Promise и работает асинхронно. Объясни, что ответ нужно обрабатывать вручную: проверять статус через response.ok или response.status, так как Promise не переходит в rejected при HTTP-ошибках. Покажи базовый пример с GET и POST. Упомяни, что fetch не отправляет cookies по умолчанию - для этого нужно указать credentials: 'include'.

Что проверяет интервьюер

Интервьюер проверяет понимание асинхронности в JavaScript, умение работать с Promise и цепочками then/catch, знание основ HTTP-протокола (методы, статусы, заголовки). Также важно понимание особенностей fetch: обработка ошибок, чтение тела ответа, ограничение на однократное чтение, отличие от XMLHttpRequest.

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

• Не проверять статус ответа через response.ok или response.status, полагаясь только на catch
• Пытаться прочитать тело ответа дважды (например, вызвать .json() и потом .text())
• Забывать про credentials: 'include' для отправки cookies
• Не обрабатывать ошибки сети (отсутствие интернета) через catch
• Использовать fetch в Node.js без установки дополнительного пакета (node-fetch или встроенный в Node 18+)