Набір властивостей і методів, які дозволяють відправляти, отримувати та обробляти ресурси із сервера.
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => {
// Response handling
})
.then(data => {
// Data handling
})
.catch(error => {
// Error handling
});
Значення промісу, який повертає метод fetch() — це об'єкт зі службовою інформацією про стан відповіді сервера. Цей об’єкт є екземпляром класу Response, який включає різні методи та властивості. Залежно від типу отримуваного контенту, використовуються різні методи для перетворення тіла відповіді у дані.
У прикладі нижче в першому методі then() виконується перевірка статусу відповіді й перетворення даних у правильний формат (парсинг) у разі успішного результату або явне створення помилки, щоб обробити невдалий HTTP-запит у методі catch().
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then(data => {
// Data handling
console.log(data);
})
.catch(error => {
// Error handling
console.log(error);
});
= CRUD
const options = {
method: "GET"
};
fetch("<https://jsonplaceholder.typicode.com/users>", options)
.then(response => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then(data => {
// Data handling
})
.catch(error => {
// Error handling
});
Для GET-запиту вказувати його в опціях fetch не потрібно, це метод запиту за замовчуванням.
Заголовки містять службову інформацію, що стосується запиту або відповіді. Наприклад:
Наприклад, якщо ми хочемо явно вказати, що у відповіді від бекенда ми очікуємо тільки JSON, то для цього додаємо заголовок Accept зі значенням application/json.
fetch("https://jsonplaceholder.typicode.com/users", {
headers: {
Accept: "application/json",
},
}).then(response => {
// ...
});
За замовчуванням HTTP-запит можна робити тільки в рамках поточного сайту. При спробі запиту на інший домен, порт або протокол (тобто при спробі виконати кросдоменний запит), браузер видає помилку. Це зроблено з міркувань безпеки, і права доступу налаштовуються на бекенді. Якщо бекенд не підтримує кросдоменні запити, фронтенд-розробник нічого не зможе з цим зробити у своєму коді. На кожному запиті браузер сам додає HTTP-заголовок Origin, де вказує адресу вебсторінки, яка хоче зробити HTTP-запит. Наприклад, якщо ми робимо fetch-запит із вебсторінки https://my-site.com/about на https://my-api.com/users, то заголовки будуть наступними:
GET /users Host: my-api.com Origin: <https://my-site.com>
Метод отримання або відправлення даних з подальшим оновленням інтерфейсу за цими даними, без потреби перезавантаження сторінки. Завдяки цьому зменшується час відгуку і вебсторінка стає інтерактивнішою. Незважаючи на те, що в назві технології присутній XML, у сучасному інтернеті його замінив JSON, а назву залишили як данину пам'яті. AJAX трактується як будь-яке спілкування з сервером без перезавантаження сторінки.
const fetchUsersBtn = document.querySelector(".btn");
const userList = document.querySelector(".user-list");
fetchUsersBtn.addEventListener("click", () => {
fetch("<https://jsonplaceholder.typicode.com/users>")
.then((response) => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then((users) => {
const markup = users.map((user) => {
return `<li>
<p><b>Name</b>: ${user.name}</p>
<p><b>Email</b>: ${user.email}</p>
<p><b>Company</b>: ${user.company.name}</p>
</li>`;
})
.join("");
userList.insertAdjacentHTML("beforeend", markup);
})
.catch((error) => console.log(error));
});
Символ ? вказує на початок параметрів запиту. Кожен параметр — це пара ім'я=значення.
fetch("https://jsonplaceholder.typicode.com/users?_limit=7&_sort=name")
Параметрів може бути багато, і незручно складати з них один довгий рядок як для читабельності, так і для його подальшого редагування. Під час складання рядків параметрів, створюється екземпляр класу URLSearchParams та ініціалізується об'єктом. Результатом буде спеціальний об'єкт (ітератор) з методами, який у рядковому перетворенні повертає результат виклику методу toString() — своє рядкове відображення.
Приклад 1
const searchParams = new URLSearchParams({
_limit: 5,
_sort: "name",
});
console.log(searchParams.toString()); // "_limit=5&_sort=name"
const url = `https://jsonplaceholder.typicode.com/users?${searchParams}`;
console.log(url); // "<https://jsonplaceholder.typicode.com/users?_limit=5&_sort=name>"
У разі інтерполяції значення в шаблонних рядках відбувається його неявне перетворення в рядок, тому не потрібно викликати метод toString() під час складання URL. Не забувай вказувати початок рядка запиту символом ?.
Приклад 2
// Change this number to fetch different post
const postId = 1;
fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
.then((response) => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then(post => console.log(post))
.catch(error => console.log(error));
Метод POST використовується для додавання нового ресурсу.
const postToAdd = {
title: "CRUD",
body: "CRUD is awesome!",
};
const options = {
method: "POST",
body: JSON.stringify(postToAdd),
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
};
fetch("<https://jsonplaceholder.typicode.com/posts>", options)
.then((response) => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then(post => console.log(post))
.catch(error => console.log(error));
Використовуються для оновлення існуючих даних. За HTTP-стандартом:
// Change value of id property to update different post
const postToUpdate = {
id: 1,
body: "CRUD is really awesome!",
};
const options = {
method: "PATCH",
body: JSON.stringify(postToUpdate),
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
};
fetch(`https://jsonplaceholder.typicode.com/posts/${postToUpdate.id}`, options)
.then((response) => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then(post => console.log(post))
.catch(error => console.log("ERROR:", error));
використовується для видалення існуючих даних
const postIdToDelete = 1;
fetch(`https://jsonplaceholder.typicode.com/posts/${postIdToDelete}`, {
method: "DELETE",
})
.then((response) => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then((deletedPost) => console.log(deletedPost))
.catch(error => console.log("Error:", error));