Fetch API: современные сетевые запросы в JavaScript

Расширенные примеры и нестандартные сценарии

Как выполнить цепочку последовательных запросов?

Иногда требуется сначала получить один ресурс, а затем, используя его данные, запросить другой. С помощью async/await это становится очевидным:

async function getUserPosts(userId) {
  try {
    const userResponse = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    if (!userResponse.ok) throw new Error('Пользователь не найден');
    const user = await userResponse.json();

    const postsResponse = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);
    if (!postsResponse.ok) throw new Error('Не удалось загрузить посты');
    const posts = await postsResponse.json();

    console.log('Имя пользователя:', user.name);
    console.log('Количество постов:', posts.length);
    return { user, posts };
  } catch (error) {
    console.error('Ошибка в цепочке:', error);
  }
}

getUserPosts(1);

Результат (пример вывода):

Имя пользователя: Leanne Graham
Количество постов: 10

Как выполнить несколько параллельных запросов и дождаться всех?

Для параллельной загрузки используется Promise.all:

async function fetchMultiple() {
  const urls = [
    'https://api.github.com/users/octocat',
    'https://api.github.com/users/defunkt'
  ];

  try {
    const promises = urls.map(url => fetch(url).then(res => {
      if (!res.ok) throw new Error('Ошибка загрузки ' + url);
      return res.json();
    }));

    const [user1, user2] = await Promise.all(promises);
    console.log('Первый пользователь:', user1.login);
    console.log('Второй пользователь:', user2.login);
  } catch (error) {
    console.error('Один из запросов завершился ошибкой:', error);
  }
}

fetchMultiple();

Результат:

Первый пользователь: octocat
Второй пользователь: defunkt

Если один запрос провалится, Promise.all отклонит весь промис. Альтернатива – Promise.allSettled, позволяющий получить результаты всех запросов независимо от успеха.

Как отслеживать прогресс загрузки (download progress)?

Fetch API не предоставляет встроенного метода для отслеживания прогресса, но можно использовать ReadableStream и чтение порциями:

async function fetchWithProgress(url) {
  const response = await fetch(url);
  const contentLength = response.headers.get('Content-Length');
  const total = contentLength ? parseInt(contentLength, 10) : 0;
  let loaded = 0;

  const reader = response.body.getReader();
  const chunks = [];

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
    loaded += value.length;
    if (total) {
      const percent = Math.round((loaded / total) * 100);
      console.log(`Загружено ${percent}%`);
    }
  }

  // Собираем все чанки в один Uint8Array
  const allChunks = new Uint8Array(loaded);
  let position = 0;
  for (let chunk of chunks) {
    allChunks.set(chunk, position);
    position += chunk.length;
  }

  // Преобразуем в строку, если это текстовые данные
  const decoder = new TextDecoder('utf-8');
  const result = decoder.decode(allChunks);
  return result;
}

fetchWithProgress('https://example.com/large-file.txt')
  .then(data => console.log('Полные данные:', data.substring(0, 100)))
  .catch(error => console.error(error));

Этот пример демонстрирует работу с потоком, но на практике для большинства случаев достаточно использования response.blob() или response.text(). Метод с чтением потока полезен для очень больших файлов, когда нужно показывать прогресс или обрабатывать данные по мере поступления.

Как использовать разные HTTP методы (PUT, DELETE, PATCH)?

Fetch поддерживает любые методы, достаточно указать их в настройках:

// PUT - обновление ресурса
fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Иван Обновлённый' })
})
  .then(res => res.json())
  .then(data => console.log('Обновлено:', data))
  .catch(err => console.error(err));

// DELETE - удаление
fetch('https://api.example.com/users/1', {
  method: 'DELETE'
})
  .then(res => {
    if (res.ok) console.log('Ресурс удалён');
  })
  .catch(err => console.error(err));

// PATCH - частичное обновление
fetch('https://api.example.com/users/1', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ age: 31 })
})
  .then(res => res.json())
  .then(data => console.log('Обновлён возраст:', data));

Обратите внимание, что для PUT и PATCH необходимо передавать тело запроса, а для DELETE тело обычно не требуется.

Как работать с кэшированием ответов?

Fetch позволяет управлять кэшированием с помощью свойства cache:

// Попробовать взять из кэша, если нет – запросить с сервера
fetch(url, { cache: 'default' })
  .then(response => response.json())
  .then(data => console.log(data));

// Всегда запрашивать с сервера, игнорируя кэш
fetch(url, { cache: 'no-store' })
  .then(response => response.json())
  .then(data => console.log(data));

// Использовать кэш только если он свежий, иначе ошибка
fetch(url, { cache: 'only-if-cached' })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.log('Нет кэша или он устарел'));

Значения 'no-cache', 'force-cache' и 'only-if-cached' дают тонкий контроль. Однако поведение кэша может отличаться в зависимости от браузера и настроек сервера.

Как отправлять данные в формате URL-encoded (application/x-www-form-urlencoded)?

Иногда требуется отправить данные как стандартную форму (как если бы отправлялась HTML-форма). Для этого тело должно быть сериализовано соответствующим образом:

const params = new URLSearchParams();
params.append('name', 'Иван');
params.append('age', '30');

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: params
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Использование URLSearchParams автоматически кодирует ключи и значения, что удобно и безопасно.

Как получить заголовки ответа?

Доступ к заголовкам ответа осуществляется через объект response.headers:

fetch('https://api.github.com')
  .then(response => {
    console.log('Content-Type:', response.headers.get('Content-Type'));
    console.log('Server:', response.headers.get('Server'));
    // Можно перебрать все заголовки
    for (let [key, value] of response.headers) {
      console.log(`${key}: ${value}`);
    }
    return response.json();
  })
  .then(data => console.log(data));

Важно: некоторые заголовки (например, Set-Cookie) недоступны через JavaScript по соображениям безопасности.

Как выполнить запрос с разными опциями (redirect, referrer, integrity)?

Fetch поддерживает множество дополнительных параметров:

fetch('https://example.com', {
  // Обработка редиректов: 'follow' (по умолчанию), 'error', 'manual'
  redirect: 'manual',
  // Реферер
  referrer: 'https://mysite.com',
  // Проверка целостности (SRI)
  integrity: 'sha384-...',
  // Таймаут (с помощью AbortController, как описано выше)
})
  .then(response => {
    console.log('Статус:', response.status);
    // При redirect: 'manual' редирект не будет выполнен автоматически
    if (response.status === 301 || response.status === 302) {
      console.log('Редирект на:', response.headers.get('Location'));
    }
  });

Параметр redirect: 'manual' полезен, когда нужно перехватить редирект перед его выполнением, например, для отладки.

Как использовать Fetch с Service Workers?

В Service Worker fetch используется для перехвата сетевых запросов. Пример кэширования ресурсов:

// В файле service-worker.js
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        // Вернуть из кэша, если есть, или запросить по сети
        return cachedResponse || fetch(event.request);
      })
  );
});

Этот код позволяет реализовать офлайн-режим. Внутри обработчика fetch можно модифицировать запрос, подменять URL, добавлять заголовки и т.д.