Различия

Показаны различия между двумя версиями страницы.

--- zaprosi_do_http_api [2024/01/24 19:46]
tro
+++ zaprosi_do_http_api [2024/01/24 19:56] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Запроси до HTTP / Api ======
-===== fetch (відправка запиту) =====
+====== fetch (відправка запиту) ======
 Набір властивостей і методів, які дозволяють відправляти, отримувати та обробляти ресурси із сервера.
 <code>
@@ Строка 137: / Строка 137: @@
 });
 </code>
+====== GET (Запит) ======
 ===== Параметри рядка запиту =====
 Символ ? вказує на початок параметрів запиту. Кожен параметр — це пара ім'я=значення.
@@ Строка 145: / Строка 146: @@
 Параметрів може бути багато, і незручно складати з них один довгий рядок як для читабельності, так і для його подальшого редагування.
 Під час складання рядків параметрів, створюється екземпляр класу URLSearchParams та ініціалізується об'єктом. Результатом буде спеціальний об'єкт (ітератор) з методами, який у рядковому перетворенні повертає результат виклику методу toString() — своє рядкове відображення.
+**Приклад 1**
 <code>
 const searchParams = new URLSearchParams({
@@ Строка 157: / Строка 160: @@
 </code>
 У разі інтерполяції значення в шаблонних рядках відбувається його неявне перетворення в рядок, тому не потрібно викликати метод toString() під час складання URL. Не забувай вказувати початок рядка запиту символом ?.
+**Приклад 2**
+<code>
+// 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));
+</code>
+====== Post (Створення) ======
+Метод POST використовується для додавання нового ресурсу.
+<code>
+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));
+</code>
+====== PUT і PATCH (Оновлення) ======
+Використовуються для оновлення існуючих даних.
+За HTTP-стандартом:
+  * PATCH замінює в наявному ресурсі значення, які були передані в тілі запиту. Значення ресурсу, які не передавались, лишаться без змін;
+  * PUT повністю замінює ресурс. Значення ресурсу, які не передавались, видаляються з ресурсу.
+<code>
+// 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));
+</code>
+====== DELETE (Видалення) ======
+використовується для видалення існуючих даних
+<code>
+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));
+</code>