Что возвращает Fetch?

Что возвращает метод fetch()?

Метод fetch() возвращает объект Promise, который разрешается в объект Response, представляющий ответ на выполненный HTTP-запрос. Это ключевая концепция современного JavaScript для работы с сетевыми запросами, построенная на Promise-based API.

Детальное объяснение возвращаемого значения

const fetchPromise = fetch('https://api.example.com/data');
// fetchPromise — это Promise

1. Первый этап: Promise
   • fetch() немедленно возвращает Promise в состоянии pending (ожидание)
   • Этот Promise будет разрешен (fulfilled) когда:

     - Получен HTTP-ответ (даже если статус 404 или 500)
     - Или отклонен (rejected) при:
       - Сетевой ошибке (нет соединения)
       - Ошибке CORS (в консоли будет видна, но Promise отклонится)

1. Второй этап: Response объект Когда Promise разрешается, он возвращает объект Response, который содержит:

   fetch('https://api.example.com/data')
     .then(response => {
       // response — это объект Response
       console.log(response.ok); // true для статусов 200-299
       console.log(response.status); // числовой код статуса (200, 404 и т.д.)
       console.log(response.headers); // объект Headers
       console.log(response.url); // итоговый URL после редиректов
     });
   

Ключевые свойства и методы объекта Response

Основные свойства Response:

• response.ok — boolean, true для статусов 200-299
• response.status — числовой код HTTP-статуса (200, 404, 500 и т.д.)
• response.statusText — текст статуса ("OK", "Not Found")
• response.headers — объект Headers с методами get(), has()
• response.url — итоговый URL после возможных редиректов
• response.redirected — boolean, был ли редирект
• response.type — тип ответа ("basic", "cors", "error")

Методы для извлечения тела ответа: Каждый из этих методов возвращает Promise:

// Для текстовых данных
response.text().then(text => console.log(text));

// Для JSON (наиболее распространенный вариант)
response.json().then(data => console.log(data));

// Для бинарных данных
response.blob().then(blob => console.log(blob));
response.arrayBuffer().then(buffer => console.log(buffer));

// Для FormData
response.formData().then(formData => console.log(formData));

Важные особенности работы с fetch()

1. Обработка ошибок HTTP-статусов

   fetch('/api/data')
     .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() не отклоняет Promise для статусов 400/500 — нужно проверять response.ok или response.status вручную.

2. Настройка запроса через второй параметр

   fetch('/api/data', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({ key: 'value' }),
     mode: 'cors',
     cache: 'no-cache',
     credentials: 'include' // для отправки кук
   });
   

3. Отмена запроса с AbortController

   const controller = new AbortController();
   const signal = controller.signal;
   
   fetch('/api/data', { signal })
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(err => {
       if (err.name === 'AbortError') {
         console.log('Запрос отменен');
       }
     });
   
   // Для отмены запроса:
   controller.abort();
   

4. Работа с заголовками

   fetch('/api/data')
     .then(response => {
       const contentType = response.headers.get('Content-Type');
       const cacheControl = response.headers.get('Cache-Control');
       
       // Итерация по всем заголовкам
       for (const [key, value] of response.headers) {
         console.log(`${key}: ${value}`);
       }
     });
   

Практический пример полной обработки

async function fetchData(url) {
  try {
    const response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`Ошибка HTTP: ${response.status}`);
    }
    
    const contentType = response.headers.get('Content-Type');
    
    if (contentType.includes('application/json')) {
      return await response.json();
    } else if (contentType.includes('text/')) {
      return await response.text();
    } else {
      return await response.blob();
    }
  } catch (error) {
    if (error.name === 'TypeError') {
      console.error('Сетевая ошибка или CORS проблема');
    }
    throw error;
  }
}

Отличия от legacy XMLHttpRequest

• Promise-based вместо callback-based подхода
• Более чистое API без наследования событий
• Встроенная поддержка Streams API
• Нет отправки прогресса по умолчанию (нужен отдельный подход)
• Более строгая обработка CORS

Таким образом, fetch() возвращает Promise → Response, что обеспечивает современный, гибкий и мощный подход к работе с сетевыми запросами в JavaScript, хотя и требует более внимательной обработки ошибок HTTP-статусов по сравнению с некоторыми библиотеками-обертками.