StudyCode
Запросы к серверу: GET, POST, заголовки, обработка ошибок, работа с JSON.
fetch возвращает Promise с объектом Response.
const response = await fetch("https://api.example.com/users");
// response — не данные! Это объект с информацией об ответе
response.ok; // true если статус 200-299
response.status; // 200, 404, 500 и т.д.
// Получить тело ответа:
const data = await response.json(); // JSON → объект
// или:
const text = await response.text(); // как строка
const blob = await response.blob(); // как бинарные данные// ❌ Неправильно — 404 не вызовет catch!
const res = await fetch("/api/data");
const data = await res.json(); // может получить тело ошибки
// ✅ Правильно — проверяй res.ok
const res = await fetch("/api/data");
if (!res.ok) {
throw new Error(`Ошибка: ${res.status}`);
}
const data = await res.json();fetch бросает исключение только при сетевой ошибке (нет соединения, DNS не нашёл хост). Статус 400, 404, 500 — это не ошибки с точки зрения fetch!
// Полный GET запрос с обработкой ошибок
async function getUser(id) {
try {
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!res.ok) {
throw new Error(`Пользователь не найден (HTTP ${res.status})`);
}
const user = await res.json();
return user;
} catch (err) {
if (err.name === "TypeError") {
// Сетевая ошибка (нет интернета)
throw new Error("Нет соединения с сервером");
}
throw err; // Пробрасываем ошибку выше
}
}
// Использование
try {
const user = await getUser(1);
console.log(user.name); // "Leanne Graham"
} catch (err) {
console.error(err.message);
}console.log('start');
setTimeout(() => console.log('setTimeout!'), 0);
Promise.resolve().then(() => console.log('Promise!'));
console.log('end');
// Вывод:
// start
// end
// Promise!
// setTimeout!