Различия

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

--- zaprosi_do_http_api [2024/01/24 19:40]
tro
+++ zaprosi_do_http_api [2024/01/24 19:56] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Запроси до HTTP / Api ======
-===== fetch (відправка запиту) =====
+====== fetch (відправка запиту) ======
 Набір властивостей і методів, які дозволяють відправляти, отримувати та обробляти ресурси із сервера.
 <code>
@@ Строка 54: / Строка 54: @@
   });
 </code>
-===== HTTP-методи =====
+===== HTTP-методи (CRUD) =====
-  * **POST** — створити новий ресурс
+  * **POST** — створити новий ресурс (**C**reate)
-  * **GET** — отримати набір ресурсів або один ресурс
+  * **GET** — отримати набір ресурсів або один ресурс (**R**ead)
-  * **PUT** — оновити існуючий або створити новий ресурс
+  * **PUT** — оновити існуючий або створити новий ресурс (**U**pdate)
-  * **PATCH** — оновити існуючий ресурс
+  * **PATCH** — оновити існуючий ресурс (Update)
-  * **DELETE** — видалити ресурс
+  * **DELETE** — видалити ресурс(**D**elete)
+ = CRUD
 <code>
 const options = {
@@ Строка 135: / Строка 137: @@
 });
 </code>
+====== GET (Запит) ======
 ===== Параметри рядка запиту =====
 Символ ? вказує на початок параметрів запиту. Кожен параметр — це пара ім'я=значення.
 <code>
 fetch("https://jsonplaceholder.typicode.com/users?_limit=7&_sort=name")
+</code>
+==== Клас URLSearchParams ====
+Параметрів може бути багато, і незручно складати з них один довгий рядок як для читабельності, так і для його подальшого редагування.
+Під час складання рядків параметрів, створюється екземпляр класу URLSearchParams та ініціалізується об'єктом. Результатом буде спеціальний об'єкт (ітератор) з методами, який у рядковому перетворенні повертає результат виклику методу toString() — своє рядкове відображення.
+**Приклад 1**
+<code>
+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>"
+</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>