Различия

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

--- zaprosi_do_http_api [2024/01/24 19:30]
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 = {
@@ Строка 89: / Строка 91: @@
 Наприклад, якщо ми хочемо явно вказати, що у відповіді від бекенда ми очікуємо тільки JSON, то для цього додаємо заголовок Accept зі значенням application/json.
 <code>
-fetch("<https://jsonplaceholder.typicode.com/users>", {
+fetch("https://jsonplaceholder.typicode.com/users", {
   headers: {
     Accept: "application/json",
@@ Строка 97: / Строка 99: @@
 });
 </code>
+===== Кросдоменні запити =====
+За замовчуванням HTTP-запит можна робити тільки в рамках поточного сайту. При спробі запиту на інший домен, порт або протокол (тобто при спробі виконати кросдоменний запит), браузер видає помилку. Це зроблено з міркувань безпеки, і права доступу налаштовуються на бекенді. Якщо бекенд не підтримує кросдоменні запити, фронтенд-розробник нічого не зможе з цим зробити у своєму коді.
+На кожному запиті браузер сам додає HTTP-заголовок Origin, де вказує адресу вебсторінки, яка хоче зробити HTTP-запит. Наприклад, якщо ми робимо fetch-запит із вебсторінки https://my-site.com/about на https://my-api.com/users, то заголовки будуть наступними:
+<code>
+GET /users
+Host: my-api.com
+Origin: <https://my-site.com>
+</code>
+===== AJAX (Asynchronous JavaScript and XML) =====
+Метод отримання або відправлення даних з подальшим оновленням інтерфейсу за цими даними, без потреби перезавантаження сторінки. Завдяки цьому зменшується час відгуку і вебсторінка стає інтерактивнішою.
+Незважаючи на те, що в назві технології присутній XML, у сучасному інтернеті його замінив JSON, а назву залишили як данину пам'яті. AJAX трактується як будь-яке спілкування з сервером без перезавантаження сторінки.
+<code>
+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));
+});
+</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>