Работа с Fetch JS: основы и продвинутые техники

Главные преимущества Fetch перед его предшественником:

Промис-ориентированный подход: работа строится на цепочках .then() и .catch(), что избавляет от «ада колбэков».

• Более чистый и читаемый синтаксис: код становится структурированным и предсказуемым.
• Гибкая настройка запросов: через объект конфигурации init.
• Встроенная работа с современными стандартами, такими как FormData, Blob, Streams.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

Базовый синтаксис метода fetch() довольно прост: он принимает два аргумента. Первый, обязательный — это URL ресурса, который нужно получить. Второй, необязательный — объект настроек (options), где можно указать метод запроса, заголовки, тело и другие параметры. Сам метод всегда возвращает Promise, который разрешается в объект Response — даже если сервер вернул ошибку, например, 404 или 500.

Стандартная структура запроса включает в себя несколько этапов: инициализация, обработка ответа (с проверкой статуса), преобразование данных и обработка возможных ошибок. Важно понимать, что промис, возвращаемый fetch, не перейдет в состояние rejected при HTTP-ошибках (например, 404). Он завершится успешно, а свойство response.ok будет равно false. Отвергнется промис только при сбое сети или если не удалось совершить запрос.

fetch('https://api.example.com/users/1')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Статус: ${response.status}`);
    }
    return response.json();
  })
  .then(user => console.log(user))
  .catch(error => console.error('Проблема с fetch запросом:', error));

Для полноценного взаимодействия с сервером недостаточно только URL. Объект настроек (options) в качестве второго аргумента fetch() позволяет детально контролировать все аспекты запроса. Это ключевой инструмент для отправки POST, PUT, DELETE запросов, передачи заголовков авторизации, кук и других данных.

Основные свойства объекта options:

• method: строка с HTTP-методом ('GET', 'POST', 'PUT', 'DELETE' и др.).
• headers: объект с HTTP-заголовками (например, {'Content-Type': 'application/json'}).
• body: данные для отправки (строка, FormData, Blob, ArrayBuffer и т.д.). Для методов GET и HEAD не используется.
• mode: режим запроса ('cors', 'no-cors', 'same-origin').
• credentials: управление передачей кук и учетных данных ('omit', 'same-origin', 'include').
• cache: политика кеширования ('default', 'no-store', 'reload' и др.).

fetch('https://api.example.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  body: JSON.stringify({
    title: 'Новый пост',
    body: 'Содержимое поста'
  })
})
.then(response => response.json())
.then(post => console.log('Создано:', post));

После выполнения запроса мы получаем объект Response. Этот объект содержит всю информацию об ответе сервера: статус, заголовки и тело. Прежде чем извлечь данные из тела, необходимо использовать соответствующий метод для его преобразования, так как тело ответа является ReadableStream.

Основные методы для чтения тела ответа (каждый можно вызвать только один раз):

• response.json(): парсит тело как JSON, возвращает промис с JavaScript-объектом.
• response.text(): возвращает тело как текст.
• response.blob(): возвращает тело как Blob (бинарные данные, например, изображение).
• response.formData(): возвращает тело как объект FormData.
• response.arrayBuffer(): возвращает тело как ArrayBuffer (низкоуровневое представление бинарных данных).

Важные свойства объекта Response:

• ok: булево значение, true если статус ответа в диапазоне 200-299.
• status: числовой код статуса HTTP (200, 404, 500 и т.д.).
• statusText: текстовое сообщение статуса ('OK', 'Not Found').
• headers: объект с заголовками ответа.

fetch('https://api.example.com/avatar.jpg')
  .then(response => response.blob())
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob);
    document.getElementById('avatar').src = imageUrl;
  });

fetch('https://api.example.com/data.csv')
  .then(response => response.text())
  .then(csvText => {
    console.log('CSV данные:', csvText);
  });

Для создания профессиональных приложений базовых знаний о Fetch недостаточно. Продвинутые техники включают в себя детальную работу с заголовками, управление кешированием и возможность прервать долгий запрос.

Работа с заголовками осуществляется через объекты Headers. Их можно передавать в настройках запроса и читать из ответа.

const myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
myHeaders.append('X-Custom-Header', 'value');

// Чтение заголовков ответа
fetch('https://api.example.com/')
  .then(response => {
    const contentType = response.headers.get('content-type');
    if (contentType && contentType.includes('application/json')) {
      return response.json();
    }
    throw new TypeError('Ожидался JSON!');
  });

Управление кешированием происходит через опцию cache. Это критически важно для производительности.

// Всегда запрашивать свежие данные с сервера, игнорируя кеш браузера и HTTP-кеш
fetch('https://api.example.com/data', {
  cache: 'no-store'
});

// Использовать кеш, но проверить обновления на сервере (как при перезагрузке страницы Ctrl+F5)
fetch('https://api.example.com/data', {
  cache: 'reload'
});

Прерывание запроса (AbortController) — это мощный механизм для отмены fetch-запроса, если он больше не нужен (например, пользователь ушел со страницы или вводит новый поисковый запрос).

const controller = new AbortController();
const signal = controller.signal;

// Запускаем запрос с сигналом
fetch('https://api.example.com/large-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);

Надежная обработка ошибок в Fetch API требует комплексного подхода, так как промис не переходит в состояние rejected при HTTP-ошибках. Необходимо обрабатывать как сбои сети, так и «неуспешные» ответы от сервера.

Основные типы ошибок, которые нужно учитывать:

• Сетевые ошибки: промис будет отвергнут, выполнится блок .catch().
• Ошибки HTTP (4xx, 5xx): промис будет выполнен, но response.ok будет false.
• Ошибки парсинга тела ответа: например, если вызвать .json() для ответа, который не является валидным JSON.

async function fetchData(url) {
  try {
    const response = await fetch(url);
    // Проверяем, успешен ли HTTP-статус
    if (!response.ok) {
      // Можно попробовать прочитать тело ошибки от сервера
      const errorText = await response.text();
      throw new Error(`Запрос завершился с ошибкой ${response.status}: ${errorText}`);
    }
    // Пытаемся распарсить JSON
    const data = await response.json();
    return data;
  } catch (error) {
    // Ловим любые ошибки: сетевые, парсинга или выброшенные нами
    console.error('Не удалось загрузить данные:', error.message);
    // Пробрасываем ошибку дальше или возвращаем значение по умолчанию
    throw error;
  }
}

// Использование
fetchData('https://api.example.com/broken-endpoint')
  .then(data => console.log(data))
  .catch(() => {
    console.log('Показываем пользователю сообщение об ошибке');
  });

В реальных проектах практические примеры и лайфхаки с использованием Fetch API помогают решать типовые задачи эффективно.

1. Отправка данных формы (FormData)

Идеально подходит для отправки файлов и данных формы без ручного формирования multipart/form-data.

<form id="user-form">
  <input type="text" name="username" required>
  <input type="email" name="email" required>
  <input type="file" name="avatar">
  <button type="submit">Отправить</button>
</form>

<script>
  document.getElementById('user-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);

    const response = await fetch('https://api.example.com/profile', {
      method: 'POST',
      body: formData
      // Заголовок 'Content-Type' НЕ устанавливаем вручную! Браузер сделает это сам с правильным boundary.
    });
    const result = await response.json();
    console.log(result);
  });
</script>

2. Параллельное выполнение запросов (Promise.all)

Для загрузки данных с нескольких эндпоинтов одновременно.

async function fetchUserAndPosts(userId) {
  const [userResponse, postsResponse] = await Promise.all([
    fetch(`https://api.example.com/users/${userId}`),
    fetch(`https://api.example.com/users/${userId}/posts`)
  ]);

  // Проверяем оба ответа на ошибки
  if (!userResponse.ok || !postsResponse.ok) {
    throw new Error('Один из запросов не удался');
  }

  const user = await userResponse.json();
  const posts = await postsResponse.json();

  return { user, posts };
}

fetchUserAndPosts(1)
  .then(data => {
    console.log('Пользователь:', data.user);
    console.log('Посты:', data.posts);
  });

3. Лайфхак: создание фабрики/обертки для запросов

Чтобы избежать дублирования кода (базовый URL, заголовки авторизации, обработка ошибок).

class ApiClient {
  constructor(baseUrl, defaultHeaders = {}) {
    this.baseUrl = baseUrl;
    this.defaultHeaders = defaultHeaders;
  }

  async request(endpoint, options = {}) {
    const url = `${this.baseUrl}${endpoint}`;
    const headers = { ...this.defaultHeaders, ...options.headers };

    const response = await fetch(url, { ...options, headers });

    if (!response.ok) {
      const error = new Error(`API Error: ${response.status}`);
      error.status = response.status;
      throw error;
    }

    // Предполагаем, что ответ всегда JSON. Можно сделать адаптивнее.
    return response.json();
  }

  get(endpoint) {
    return this.request(endpoint);
  }

  post(endpoint, body) {
    return this.request(endpoint, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    });
  }
}

// Использование
const api = new ApiClient('https://api.example.com', { 'X-API-Key': 'secret' });
api.get('/users').then(users => console.log(users));
api.post('/users', { name: 'Анна' }).then(newUser => console.log(newUser));

Освоив Fetch API, вы сделали серьезный шаг в развитии своих навыков современного JavaScript-разработчика. Однако это лишь один из множества мощных инструментов в экосистеме языка.

Если вы хотите не просто фрагментарно изучить тему запросов, а системно выстроить знания от основ переменных и функций до сложных архитектурных решений и фреймворков, обратите внимание на наш онлайн-курс «Обучение JavaScript с нуля до профи». Он предоставит вам структурированный путь, поддержку опытного наставника и реальные проекты для портфолио, что превратит ваше обучение из хаотичного поиска информации в уверенное движение к цели.

А если вам нужен не просто навык, а готовый, профессионально выполненный продукт — наша веб-студия готова воплотить вашу идею в жизнь. Мы создаем сайты и веб-приложения, которые эффективно решают задачи бизнеса. Свяжитесь с нами для бесплатной консультации, и мы вместе обсудим ваш проект.