Работа с Fetch API в JavaScript: примеры, методы и приемы кода

fetch(resource, options)
.then(response => /* обработка ответа */)
.catch(error => /* обработка ошибки */);

// Получение ответа в виде JSON
response.json()

// Получение ответа в виде текста
response.text()

// Получение ответа в виде Blob
response.blob()

// Получение ответа в виде FormData
response.formData()

// Получение ответа в виде ArrayBuffer
response.arrayBuffer()

// Базовый GET-запрос
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`Ошибка HTTP: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Проблема с запросом:', error));

// GET-запрос с параметрами в URL
const params = new URLSearchParams({
category: 'electronics',
sort: 'price',
order: 'desc'
});

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

// POST-запрос с JSON данными
const userData = {
username: 'developer2023',
email: 'dev@example.com',
age: 28
};

fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your_token_here'
},
body: JSON.stringify(userData)
})
.then(response => response.json())
.then(data => console.log('Успешно создан пользователь:', data))
.catch(error => console.error('Ошибка:', error));

// GET-запрос с async/await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');

if (!response.ok) {
throw new Error(`Ошибка HTTP: ${response.status}`);
}

const data = await response.json();
return data;
} catch (error) {
console.error('Проблема с получением данных:', error);
throw error; // Пробрасываем ошибку дальше
}
}

// POST-запрос с async/await
async function createUser(userData) {
try {
const response = await fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
});

if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || `HTTP ошибка! Статус: ${response.status}`);
}

return await response.json();
} catch (error) {
console.error('Ошибка при создании пользователя:', error);
throw error;
}
}

fetch('https://api.example.com/data')
.then(response => {
// Проверка успешности запроса
if (!response.ok) {
// Извлекаем информацию об ошибке из тела ответа
return response.json().then(errorData => {
throw new Error(`API вернул ошибку: ${errorData.message || response.status}`);
});
}
return response.json();
})
.then(data => console.log('Данные:', data))
.catch(error => console.error('Ошибка:', error));

// Получение JSON
fetch('/api/users')
.then(response => response.json())
.then(users => console.log(users));

// Получение текста (например, HTML или XML)
fetch('/api/document')
.then(response => response.text())
.then(document => console.log(document));

// Получение бинарных данных (например, изображения)
fetch('/api/image.png')
.then(response => response.blob())
.then(imageBlob => {
const imageUrl = URL.createObjectURL(imageBlob);
const imgElement = document.createElement('img');
imgElement.src = imageUrl;
document.body.appendChild(imgElement);
});

// Получение FormData
fetch('/api/form-data')
.then(response => response.formData())
.then(formData => {
for (const [key, value] of formData.entries()) {
console.log(`${key}: ${value}`);
}
});

// Получение ArrayBuffer
fetch('/api/binary-data')
.then(response => response.arrayBuffer())
.then(buffer => {
// Работа с ArrayBuffer
const view = new Uint8Array(buffer);
console.log(view);
});

fetch('https://api.example.com/data')
.then(response => {
// Получение отдельного заголовка
const contentType = response.headers.get('Content-Type');
console.log('Тип контента:', contentType);

// Перебор всех заголовков
console.log('Все заголовки:');
for (const [key, value] of response.headers.entries()) {
console.log(`${key}: ${value}`);
}

// Проверка наличия заголовка
if (response.headers.has('X-Rate-Limit')) {
console.log('Ограничение запросов:', response.headers.get('X-Rate-Limit'));
}

return response.json();
});

async function fetchWithErrorHandling(url) {
try {
// Создаём таймаут для запроса
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => reject(new Error('Таймаут запроса')), 5000);
});

// Используем Promise.race для ограничения времени ожидания
const response = await Promise.race([
fetch(url),
timeoutPromise
]);

// Проверяем HTTP-статус
if (!response.ok) {
let errorMessage;

try {
// Пробуем извлечь сообщение об ошибке из тела ответа
const errorData = await response.json();
errorMessage = errorData.message || `Ошибка HTTP: ${response.status}`;
} catch (e) {
// Если не удалось распарсить JSON, используем статус
errorMessage = `Ошибка HTTP: ${response.status} ${response.statusText}`;
}

throw new Error(errorMessage);
}

// Пытаемся распарсить JSON
try {
return await response.json();
} catch (e) {
throw new Error('Невалидный формат JSON в ответе');
}
} catch (error) {
// Классифицируем ошибки
if (error.name === 'AbortError') {
console.error('Запрос был прерван');
} else if (error.message === 'Таймаут запроса') {
console.error('Сервер не ответил вовремя');
} else if (error.message.includes('NetworkError') || error.message.includes('Failed to fetch')) {
console.error('Проблема с сетевым соединением');
} else {
console.error('Ошибка API:', error.message);
}

// Пробрасываем ошибку дальше
throw error;
}
}

// Загрузка одного файла
async function uploadFile(file) {
const formData = new FormData();
formData.append('file', file);

try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});

if (!response.ok) {
throw new Error(`Ошибка загрузки: ${response.status}`);
}

return await response.json();
} catch (error) {
console.error('Проблема при загрузке файла:', error);
throw error;
}
}

// Использование с input[type="file"]
document.querySelector('#fileInput').addEventListener('change', async (event) => {
const file = event.target.files[0];
if (file) {
try {
const result = await uploadFile(file);
console.log('Файл успешно загружен:', result);
} catch (error) {
console.error('Ошибка:', error);
}
}
});

async function uploadFilesWithProgress(files, progressCallback) {
const formData = new FormData();

// Добавляем все файлы в FormData
Array.from(files).forEach((file, index) => {
formData.append(`file${index}`, file);
});

// XMLHttpRequest используется для отслеживания прогресса
// (Fetch API пока не имеет встроенной поддержки отслеживания прогресса)
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
progressCallback(percentComplete.toFixed(2));
}
});

xhr.addEventListener('load', () => {
if (xhr.status >= 200 && xhr.status < 300) {
try {
const response = JSON.parse(xhr.responseText);
resolve(response);
} catch (e) {
resolve(xhr.responseText);
}
} else {
reject(new Error(`HTTP ошибка: ${xhr.status}`));
}
});

xhr.addEventListener('error', () => reject(new Error('Сетевая ошибка')));
xhr.addEventListener('abort', () => reject(new Error('Загрузка прервана')));

xhr.open('POST', '/api/upload-multiple');
xhr.send(formData);
});
}

// Использование
document.querySelector('#multiFileInput').addEventListener('change', async (event) => {
const files = event.target.files;
if (files.length > 0) {
try {
const result = await uploadFilesWithProgress(files, (percent) => {
document.querySelector('#progressBar').value = percent;
document.querySelector('#progressText').textContent = `${percent}%`;
});
console.log('Файлы успешно загружены:', result);
} catch (error) {
console.error('Ошибка:', error);
}
}
});

// Создаём функцию для прерываемого запроса
function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
// Создаём контроллер прерывания
const controller = new AbortController();
const { signal } = controller;

// Создаём таймер, который прервёт запрос по истечении timeoutMs
const timeout = setTimeout(() => controller.abort(), timeoutMs);

// Добавляем signal к опциям запроса
return fetch(url, { ...options, signal })
.then(response => {
// Очищаем таймер при успешном ответе
clearTimeout(timeout);
return response;
})
.catch(error => {
// Очищаем таймер при ошибке
clearTimeout(timeout);
// Проверяем, была ли ошибка вызвана превышением времени ожидания
if (error.name === 'AbortError') {
throw new Error(`Запрос превысил время ожидания (${timeoutMs}ms)`);
}
throw error;
});
}

// Пример использования с возможностью ручного прерывания
let activeController = null;

function startSearch(query) {
// Прерываем предыдущий поиск, если он активен
if (activeController) {
activeController.abort();
}

// Создаём новый контроллер
activeController = new AbortController();

// Индикатор загрузки
document.querySelector('#searchStatus').textContent = 'Поиск...';

fetch(`/api/search?q=${query}`, {
signal: activeController.signal
})
.then(response => response.json())
.then(results => {
document.querySelector('#searchStatus').textContent = 'Поиск завершен';
displayResults(results);
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('Поиск был прерван');
} else {
document.querySelector('#searchStatus').textContent = 'Ошибка поиска';
console.error('Ошибка поиска:', error);
}
})
.finally(() => {
if (activeController.signal.aborted) {
activeController = null;
}
});
}

// Кнопка прерывания поиска
document.querySelector('#cancelSearch').addEventListener('click', () => {
if (activeController) {
activeController.abort();
document.querySelector('#searchStatus').textContent = 'Поиск отменен';
}
});

// Выполнение нескольких запросов параллельно
async function fetchMultipleData() {
try {
const [users, products, settings] = await Promise.all([
fetch('/api/users').then(r => r.json()),
fetch('/api/products').then(r => r.json()),
fetch('/api/settings').then(r => r.json())
]);

return { users, products, settings };
} catch (error) {
// Если любой из запросов завершится с ошибкой, выполнение прервётся
console.error('Один из запросов завершился с ошибкой:', error);
throw error;
}
}

// Параллельные запросы с независимой обработкой ошибок
async function fetchMultipleDataSafely() {
const results = await Promise.allSettled([
fetch('/api/users').then(r => r.json()),
fetch('/api/products').then(r => r.json()),
fetch('/api/settings').then(r => r.json())
]);

// Обработка результатов с учетом статуса каждого промиса
return results.map((result, index) => {
const endpointNames = ['users', 'products', 'settings'];
if (result.status === 'fulfilled') {
return { name: endpointNames[index], data: result.value, success: true };
} else {
console.error(`Ошибка при загрузке ${endpointNames[index]}:`, result.reason);
return { name: endpointNames[index], error: result.reason, success: false };
}
});
}

async function fetchWithRetry(url, options = {}, maxRetries = 3, delayMs = 1000) {
let lastError;

for (let attempt = 0; attempt < maxRetries; attempt++) {
try {
// Увеличиваем задержку с каждой попыткой (экспоненциальная задержка)
if (attempt > 0) {
const backoffDelay = delayMs * Math.pow(2, attempt – 1);
console.log(`Повторная попытка ${attempt} через ${backoffDelay}ms...`);
await new Promise(resolve => setTimeout(resolve, backoffDelay));
}

const response = await fetch(url, options);

if (!response.ok) {
// Для определенных HTTP-статусов повторяем запрос
if ([429, 500, 502, 503, 504].includes(response.status)) {
const error = new Error(`HTTP ошибка ${response.status}`);
error.status = response.status;
throw error;
}

// Для других ошибок прекращаем попытки
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.message || `HTTP ошибка ${response.status}`);
}

return response;
} catch (error) {
lastError = error;

// Не повторяем попытки для определенных ошибок
if (
(error.name === 'AbortError') ||
(error.status && ![429, 500, 502, 503, 504].includes(error.status))
) {
throw error;
}

// Если это последняя попытка, пробрасываем ошибку
if (attempt === maxRetries – 1) {
console.error(`Достигнуто максимальное количество попыток (${maxRetries})`);
throw lastError;
}
}
}
}