Что такое fetch?

Что такое Fetch API?

Fetch API — это современный JavaScript-интерфейс для выполнения сетевых HTTP-запросов, который пришёл на смену устаревшему XMLHttpRequest. Он предоставляет более мощный, гибкий и понятный способ работы с сетевыми запросами, основанный на Promise, что позволяет удобно обрабатывать асинхронные операции.

Ключевые особенности Fetch API

• Основан на Promise: В отличие от XMLHttpRequest, который использовал callback2, fetch возвращает Promise, что упрощает цепочки обработки (then/catch) и работу с async/await.
• Простота базового использования: Минимальный запрос можно выполнить одной строкой кода.
• Гибкость конфигурации: Позволяет детально настраивать запросы через объект options.
• Нативная поддержка в браузерах: Не требует сторонних библиотек для большинства задач.
• Работа с различными типами данных: Удобно обрабатывает JSON, текст, Blob, FormData и другие форматы.

Базовый синтаксис и примеры

Основная функция — fetch(url, options), где url — адрес запроса, а options — необязательный объект конфигурации.

Простой GET-запрос:

// Получение данных с публичного API
fetch('https://api.github.com/users/octocat')
  .then(response => response.json()) // Парсим ответ в JSON
  .then(data => console.log(data))   // Работаем с данными
  .catch(error => console.error('Ошибка:', error));

POST-запрос с отправкой JSON:

const newUser = {
  name: 'John Doe',
  email: 'john@example.com'
};

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token-here'
  },
  body: JSON.stringify(newUser) // Преобразуем объект в JSON-строку
})
.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));

Важные аспекты работы с Fetch

1. Обработка статусов ответа:
   Fetch не отвергает Promise при HTTP-ошибках (например, 404 или 500). Необходимо проверять свойство response.ok или response.status.

2. Конфигурационный объект options:
   Основные параметры:

   • method — HTTP-метод (GET, POST, PUT, DELETE и др.)
   • headers — объект заголовков запроса
   • body — тело запроса (для POST, PUT)
   • mode — режим CORS (cors, no-cors, same-origin)
   • credentials — управление куки (include, same-origin, omit)

3. Отмена запроса с AbortController:
   Современный способ отмены fetch-запросов:

   const controller = new AbortController();
   const signal = controller.signal;
   
   fetch('https://api.example.com/data', { signal })
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(err => {
       if (err.name === 'AbortError') {
         console.log('Запрос отменён');
       } else {
         console.error('Другая ошибка:', err);
       }
     });
   
   // Отмена запроса через 5 секунд
   setTimeout(() => controller.abort(), 5000);
   

Отличия от XMLHttpRequest и преимущества

• Более чистый синтаксис без громоздких callback
• Интеграция с современными стандартами — Streams API, Service Workers
• Лучшая обработка ошибок через цепочки Promise
• Поддержка современных возможностей — кэширование, редиректы, CORS

Ограничения и практические советы

• Отсутствие встроенного таймаута — необходимо реализовывать самостоятельно через AbortController
• Нет прогресса загрузки — для отслеживания прогресса используйте XMLHttpRequest или Fetch с Streams API
• Всегда проверяйте response.ok для корректной обработки HTTP-ошибок
• Используйте async/await для более читаемого кода:

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`Ошибка ${response.status}: ${response.statusText}`);
    }
    
    const user = await response.json();
    return user;
  } catch (error) {
    console.error('Не удалось получить данные:', error);
    return null;
  }
}

Fetch API стал стандартом для сетевых операций в современном JavaScript, предоставляя баланс между простотой использования и мощными возможностями. Для сложных приложений часто используют обёртки над fetch или библиотеки типа Axios, которые добавляют дополнительные возможности (интерцепторы, автоматические преобразования данных), но понимание нативного fetch остаётся важным навыком для frontend-разработчика.