Общее понятие JavaScript API в веб-разработке

Расширенные примеры работы с JavaScript API

Параллельные запросы с Promise.all

async function fetchMultipleUsers(userIds) {
  const urls = userIds.map(id => `https://api.example.com/users/${id}`);
  const promises = urls.map(url => fetch(url).then(res => res.json()));
  const users = await Promise.all(promises);
  return users;
}

fetchMultipleUsers([1, 2, 3]).then(users => console.log(users));
// Результат:
// [
//   { id: 1, name: 'Анна' },
//   { id: 2, name: 'Борис' },
//   { id: 3, name: 'Виктор' }
// ]

[ { id: 1, name: 'Анна' }, { id: 2, name: 'Борис' }, { id: 3, name: 'Виктор' } ]

Если один из запросов падает, весь Promise.all отклоняется. Для устойчивости можно использовать Promise.allSettled.

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

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

fetch('https://api.example.com/long-operation', { signal })
  .then(response => response.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос отменён пользователем');
    } else {
      console.error('Ошибка:', err);
    }
  });

// Через 2 секунды отменяем запрос
setTimeout(() => controller.abort(), 2000);

Полезно для поисковых полей с автодополнением (debounce), чтобы отменять устаревшие запросы.

Загрузка файла с прогрессом через fetch (используя ReadableStream)

async function uploadFile(url, file) {
  const response = await fetch(url, {
    method: 'POST',
    body: file // FormData или Blob
  });
  // Для отслеживания прогресса загрузки на клиенте fetch не предоставляет встроенных средств,
  // но можно использовать XMLHttpRequest или измерять размер отправленного чанка (сложно).
  // Альтернатива: использовать библиотеку (например, axios с onUploadProgress).
  return response.json();
}

// Пример с XMLHttpRequest (отслеживание прогресса)
function uploadFileWithProgress(url, file, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url);
    xhr.upload.addEventListener('progress', (e) => {
      if (e.lengthComputable) {
        const percent = Math.round((e.loaded / e.total) * 100);
        onProgress(percent);
      }
    });
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error('Upload failed'));
      }
    };
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send(file);
  });
}

uploadFileWithProgress('/upload', file, (p) => console.log(`${p}%`));

Обработка ошибок разных типов

async function safeFetch(url) {
  try {
    const response = await fetch(url);
    // Проверка статуса
    if (!response.ok) {
      // Попытка извлечь детали ошибки из тела
      let errorBody;
      try {
        errorBody = await response.json();
      } catch {
        errorBody = await response.text();
      }
      throw new Error(`HTTP ${response.status}: ${JSON.stringify(errorBody)}`);
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message.includes('fetch')) {
      // Ошибка сети, CORS, неверный URL
      console.error('Сетевая ошибка или CORS:', error);
    }
    throw error;
  }
}

Такой подход позволяет единообразно обрабатывать ошибки как на стороне сети, так и на стороне сервера.

Работа с куками и авторизацией

fetch('https://api.example.com/protected', {
  method: 'GET',
  credentials: 'include', // отправка кук (для same-origin и cross-origin с CORS)
  headers: {
    'Authorization': 'Bearer ' + getToken()
  }
});

Параметр credentials: 'include' обязателен, если сервер ожидает куки или сессию. Для кросс-доменов сервер должен установить заголовок Access-Control-Allow-Credentials: true.

Полиморфный запрос: обработка разных типов ответов

async function fetchWithType(url) {
  const response = await fetch(url);
  const contentType = response.headers.get('content-type');
  if (contentType && contentType.includes('application/json')) {
    return await response.json();
  } else if (contentType && contentType.includes('text/')) {
    return await response.text();
  } else if (contentType && contentType.includes('image/')) {
    // Для изображений можно получить blob и создать URL
    const blob = await response.blob();
    return URL.createObjectURL(blob);
  } else if (contentType && contentType.includes('application/octet-stream')) {
    const arrayBuffer = await response.arrayBuffer();
    return arrayBuffer;
  } else {
    return await response.text();
  }
}

Применяется при работе с API, которые могут возвращать разные форматы (например, JSON при успехе и HTML при ошибке).

Повторная попытка при временных ошибках (retry)

async function fetchWithRetry(url, options = {}, retries = 3, delay = 1000) {
  for (let attempt = 0; attempt <= retries; attempt++) {
    try {
      const response = await fetch(url, options);
      if (!response.ok && response.status >= 500) {
        // Серверная ошибка, стоит повторить
        throw new Error(`Server error ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      if (attempt === retries) throw error;
      console.warn(`Попытка ${attempt + 1} не удалась, повтор через ${delay}ms`);
      await new Promise(resolve => setTimeout(resolve, delay));
      delay *= 2; // экспоненциальная задержка
    }
  }
}

Полезно для API с временной недоступностью. Не применять к идемпотентным запросам (GET) без осторожности.