Code Example 1: XMLHttpRequest
❓ Что делает этот код? Какой подход к асинхронности здесь используется и какие у него недостатки?
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.onerror = function() {
console.error('Ошибка');
};
xhr.send();
Code Example 2: Простой GET-запрос
❓ Оба варианта делают GET-запрос. Из скольких этапов состоит получение данных через fetch? Что происходит на каждом этапе?
Promise:
fetch('https://api.example.com/users')
.then(response => {
console.log(response.status);
console.log(response.ok);
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Сетевая ошибка:', error);
});
Async/Await:
async function getUsers() {
try {
const response = await fetch('https://api.example.com/users');
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error('Ошибка:', error);
}
}
getUsers();
Code Example 3: Методы чтения тела ответа
❓ Какие методы для чтения тела ответа показаны? Можно ли вызвать несколько из них подряд на одном response?
const response = await fetch('/api/data');
const json = await response.json();
const text = await response.text();
const blob = await response.blob();
const buffer = await response.arrayBuffer();
const formData = await response.formData();
Code Example 4: POST-запрос с JSON
❓ Как здесь отправляется POST-запрос? Какие обязательные настройки нужны для отправки JSON?
async function createUser(userData) {
const response = await fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userData),
});
if (!response.ok) {
throw new Error(`Ошибка: ${response.status}`);
}
return response.json();
}
const newUser = await createUser({
name: 'Иван',
email: 'ivan@example.com'
});
Code Example 5: Настройки запроса (options)
❓ Какие параметры можно передать в объекте options? Для чего нужны mode, credentials и cache?
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer token123'
},
body: JSON.stringify(data),
mode: 'cors',
credentials: 'include',
cache: 'no-cache',
redirect: 'follow',
});
Code Example 6: Обработка HTTP-ошибок
❓ Чем отличается поведение этих двух вариантов при ответе сервера с кодом 404? Попадёт ли 404 в .catch() в первом варианте?
fetch('/api/not-found')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
fetch('/api/not-found')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
Code Example 7: Когда fetch отклоняет Promise
❓ В каких случаях fetch отклоняет Promise? Что будет при обращении к несуществующему домену?
try {
await fetch('https://несуществующий-домен.xyz');
} catch (error) {
console.log(error.name);
console.log(error.message);
}
Code Example 8: Отмена запроса с AbortController
❓ Как отменить fetch-запрос? Что произойдёт при вызове controller.abort()?
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
try {
const response = await fetch('/api/slow-endpoint', {
signal: controller.signal
});
const data = await response.json();
} catch (error) {
if (error.name === 'AbortError') {
console.log('Запрос отменён');
} else {
console.error('Ошибка:', error);
}
}
Code Example 9: Обёртка для fetch с обработкой ошибок
❓ Зачем создавать обёртку над fetch? Какие преимущества даёт функция fetchJSON?
async function fetchJSON(url, options = {}) {
const response = await fetch(url, {
headers: {
'Content-Type': 'application/json',
...options.headers,
},
...options,
});
if (!response.ok) {
const error = new Error(`HTTP ${response.status}`);
error.response = response;
error.status = response.status;
throw error;
}
return response.json();
}
try {
const users = await fetchJSON('/api/users');
} catch (error) {
if (error.status === 404) {
console.log('Пользователи не найдены');
} else {
console.error('Ошибка:', error.message);
}
}
Code Example 10: Параллельные запросы
❓ Как выполнить несколько fetch-запросов параллельно? Что произойдёт, если один из запросов завершится ошибкой?
const [users, posts, comments] = await Promise.all([
fetch('/api/users').then(r => r.json()),
fetch('/api/posts').then(r => r.json()),
fetch('/api/comments').then(r => r.json())
]);
console.log(users, posts, comments);
