Щоб переписати ваш сценарій з використанням методу fetch замість XMLHttpRequest, потрібно змінити спосіб роботи з HTTP-запитами та їхньої обробки. fetch пропонує більш зручний і сучасний інтерфейс для роботи з асинхронними HTTP-запитами через проміси.
// Використання fetch для отримання постів
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(posts => {
let result = '';
posts.forEach(item => {
result += template(item);
});
document.getElementById("blog").innerHTML = result;
// Отримання унікальних userId з постів
const userIds = posts.map(post => post.userId);
const uniqueUserIds = [...new Set(userIds)];
// Паралельний запит для отримання інформації про користувачів
return Promise.all(uniqueUserIds.map(id =>
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then(response => {
if (!response.ok) {
throw new Error('User fetch failed');
}
return response.json();
})
));
})
.then(users => {
// Встановлення імен авторів у DOM
users.forEach(user => {
document.querySelectorAll(.author[data-id="${user.id}"]).forEach(element => {
element.textContent = user.name;
});
});
})
.catch(error => {
console.error('Error:', error);
});
Щоб переписати ваш сценарій з використанням методу fetch замість XMLHttpRequest, потрібно змінити спосіб роботи з HTTP-запитами та їхньої обробки. fetch пропонує більш зручний і сучасний інтерфейс для роботи з асинхронними HTTP-запитами через проміси.
const url = "https://jsonplaceholder.typicode.com/posts";
const template = (item) => `
${item.title}
Author:
`;
// Використання fetch для отримання постів fetch(url) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(posts => { let result = ''; posts.forEach(item => { result += template(item); }); document.getElementById("blog").innerHTML = result;
}) .then(users => { // Встановлення імен авторів у DOM users.forEach(user => { document.querySelectorAll(
.author[data-id="${user.id}"]).forEach(element => { element.textContent = user.name; }); }); }) .catch(error => { console.error('Error:', error); });