http-api

Протокол HTTP

HTTP ґрунтується на структурі клієнт-сервер і моделі запит-відповідь, в якій клієнтський застосунок ініціює з'єднання, формує запит і відправляє його на сервер, після чого сервер обробляє цей запит, формує відповідь і передає її назад клієнтові. Зв'язок між ними здійснюється за допомогою низки перемежованих HTTP-запитів і HTTP-відповідей.

Протокол HTTPS

HyperText Transfer Protocol Secure - це налаштування над протоколом HTTP, в якій всі повідомлення між клієнтом і сервером шифруються з метою підвищення безпеки

REST API

Сервер - це комп'ютер зі спеціальним програмним забезпеченням. Бекенд - це програма, розташована на сервері, здатна обробити вхідні HTTP-запити і має набір готових дій на певні запити.

API

API (інтерфейс прикладного програмування) - набір чітко визначених правил зв'язку між різними програмними компонентами. Інтерфейс описує, що можна попросити програму зробити і що буде в результаті.

REST

REST (representational state transfer) - стиль бекенд-архітектури, ґрунтується на наборі принципів, які описують, яким чином визначаються і адресуються мережеві ресурси.

REST API

REST API - бекенд побудований за принципом REST. Слугує прошарком між веб-застосунком і базою даних. Має стандартний інтерфейс для звернення до ресурсів. Працює як веб-сайт, ми посилаємо HTTP-запит з клієнта на сервер, а у відповідь, замість HTML-сторінки, отримуємо дані в JSON-форматі.

HTTP-методи

Виділяють кілька основних HTTP-методів для роботи з REST-сервісом.

GET
POST - create
PUT
PATCH
DELETE

MIME-типи text/html text/css application/json

Шляхи

Доступні шляхи (ендпоінти, ресурси) описуються в документації бекенду

GET https://bookstore.com/api/orders
    Accept: application/json

Коди відповідей

AJAX

AJAX (Asynchronous JavaScript and XML) - метод отримання або відправлення даних з подальшим оновленням інтерфейсу за цими даними, без потреби перезавантаження сторінки.

На веб-сторінці відбувається подія (сторінка завантажується, натискається кнопка «Показати більше», відправляється форма тощо).
На клієнті, за допомогою JavaScript, реакцією на цю подію буде виконуватися функція для роботи з сервером, де створюється і відправляється HTTP-запит.
Сервер отримує і обробляє HTTP-запит, відправляючи назад у відповіді дані у форматі JSON.
На клієнті, за допомогою JavaScript, відповідь від сервера обробляється, зчитуються дані і оновлюється інтерфейс.

Fetch API

Інтерфейс, вбудований в браузер, доступний на об'єкті window, який містить набір властивостей і методів для відправлення, отримання та обробки ресурсів від сервера. Метод fetch() надає сучасний інтерфейс для формування запитів до сервера і побудований на промісах.

fetch(url, options)

url - шлях до даних на бекенді, які необхідно отримати, створити або змінити. Обов'язковий аргумент
options - об'єкт налаштувань запиту: метод (за замовчуванням GET), заголовки, тіло тощо. Необов'язковий аргумент.

колекцію несправжніх користувачів в ресурсі /users.

fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => {
        if (!response.ok) {
          throw new Error(response.status);
        }
        return response.json();
      })
      .then(data => {
        // Data handling
      })
      .catch(error => {
        // Error handling
      });

Це необхідно для того, щоб fetch() правильно зреагував на статус код 404, який, технічно, не є помилкою, але для клієнта - це неуспішний результат.

Вкладка Network

В інструментах розробника на вкладці Network відображаються всі HTTP-запити, що виконуються на сторінці. Вибравши фільтр XHR, залишаться тільки запити до бекенду. Після натискання кнопки в прикладі, через деякий час запит відобразиться у списку. Вибравши його, можна подивитися службову інформацію і тіло відповіді на підвкладках Headers, Preview і Response

Робота з публічним REST API

Продовжимо працювати з JSONPlaceholder API. - про колекції несправжніх користувачів.

https://jsonplaceholder.typicode.com/users

Цей шлях складається з наступних частин:

https://jsonplaceholder.typicode.com - це ендпоінт, базовий URL, точка входу в API.
/users - ресурс, до якого ми звертаємося.

Fetch users (Ex)

По кліку на кнопку «Fetch users» зробимо GET-запит і виведемо список користувачів за отриманими даними.

Параметри рядка запиту

Параметри запиту дозволяють вказати бекенду додаткові критерії. Наприклад, скільки елементів колекції ми хочемо отримати в запиті, можливо, необхідно додати сортування за якоюсь властивістю об'єкта, обмежити вибірку тощо.

Список параметрів запиту, їх назви і можливі значення залежать від бекенду і описані в документації.

Символ ? вказує на старт параметрів запиту. Кожен параметр - це пара ім'я=значення. Символ & використовується для зазначення смислового «І», розділяючи параметри в рядку запиту.

const url = "https://jsonplaceholder
    .typicode.com/users?_limit=7&_sort=name";

Fetch users sort (Ex)

По кліку на кнопку «Fetch users» зробимо GET-запит і виведемо список користувачів за отриманими даними.

Клас URLSearchParams

Параметрів може бути багато, і незручно складати з них один довгий рядок як для читабельності, так і для його подальшого редагування. Під час складання рядків параметрів, створюється екземпляр класу URLSearchParams та ініціалізується об'єктом. Результатом буде спеціальний об'єкт (ітератор) з методами, який у рядковому перетворенні повертає результат виклику методу toString() - своє рядкове відображення.

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"

HTTP-заголовки

const headers = new Headers({
    "Content-Type": "application/json",
    "X-Custom-Header": "custom value",
  });
                  
  headers.append("Content-Type", "text/bash");
  headers.append("X-Custom-Header", "custom value");
  headers.has("Content-Type"); // true
  headers.get("Content-Type"); // "text/bash"
  headers.set("Content-Type", "application/json");
  headers.delete("X-Custom-Header");

Запит з використанням заголовків буде виглядати наступним чином.

fetch("https://jsonplaceholder.typicode.com/users", {
    headers: {
      Accept: "application/json",
    },
  }).then(response => {
    // ...
  });

Крос-доменні запити

Тобто браузер - це певний посередник між JavaScript-кодом і бекендом. Він додає кожному запиту заголовок Origin з правильним значенням і перевіряє наявність заголовка Access-Control-Allow-Origin у відповіді. Якщо заголовок є і його значення підходить, виконається оригінальний запит і JavaScript-код отримає його результат, в іншому випадку буде помилка CORS.

Пагінація

пагінація - прийом, за яким, на перший і кожен наступний GET-запит повертається не вся колекція, а певна її частина. Пагінація реалізується на бекенді і використовується на фронтенді за допомогою спеціальних параметрів запиту.

Перший параметр визначає кількість елементів у відповіді від бекенду.

У такому GET-запиті бекенд поверне не всю колекцію з дванадцяти елементів, а тільки перші чотири. Якщо передати від'ємне значення або значення більше кількості елементів в колекції, то бекенд може відповісти по-різному - проігнорувати їх або повернути помилку 400 (BAD REQUEST), залежно від його реалізації.

Публічний JSONPlaceholder API так само підтримує пагінацію - кількість елементів у відповіді контролюється параметром _limit. Всього колекція / posts налічує сто елементів.

Fetch posts Пагінація (Ex)

Не працює. Можливо треба бібл axios

Список API серверів

Weather API
SWAPI
www.themoviedb.org Фільми Login: Yupiter101 Psw: ******** Lp....
colormind
deckofcardsapi.com Отримати колоду карт (два запити)
https://reqres.in Список користувачів
https://pokeapi.co/ Покемони

Практика

Мій проект Weather API

Log: s...8@ukr.net
Psw: tkxZ.X5Z+3Pk6?T
https://www.weatherapi.com/confirm.aspx?code=368bfc61-0f25-464d-87c1-98ab1bc3905e
API Key: 368bfc610f25464d87c121720241912

Завдання:

Робимо форму запиту з інпутом, селектором, та кнопкою
При відправці запиту на бекенд рендиремо відповідь

Рішення

Заходимо в документацію. Читаємо

Бачимо там Base URL: http://api.weatherapi.com/v1 - це назва бекенду

Далі ідуть ендпоінти, вони ж API

Будуємо строку посилання за Request Parameters: (Required)

Base URL: http://api.weatherapi.com/v1
    /forecast.json
    ?key=API Key
    &q=Paris
    &days=4

URL: http://api.weatherapi.com/v1/forecast.json?key=368bfc610f25464d87c121720241912&q=Paris&days=4

Будуємо форму

Іконка	Дата прогнозу	Темп ℃	Яка погода

Практика: Пагінація, Infinity scroll

the-one-api - тут ми будемо тестувати реальну авторизацію

Нажаль вона не працює (у відео)

Тому приступаємо до пагінації

Пагінація

Працюємо з фільмами. Ресурс:

www.themoviedb.org

Виявляється я вже там рарегіний

Login: Yupiter101

Psw: ******** Можливо Lp....

Заходимо на сайт https://www.themoviedb.org
/Ще
/API
Беремо токен в API-link
Токен доступу для читання API: eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3ZTIzMTFmNGYwZWMyZTNmYjgxMTl iYWUxOTFlZGNkYSIsIm5iZiI6MTY4Nzc3MDcxNi40MzEsInN1YiI6IjY0OTk1 NjVjYjM0NDA5MDBmZmVkMmI5OCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2Z XJzaW9uIjoxfQ.v5lvfPhGa7H2Bfpk4UReNHyoSEJ4fzlARwz5Rp-lGAM
Ключ API: 7e2311f4f0ec2e3fb8119bae191edcda

MOVE JS LIST

Для картинок використовувати базовий урл: https://image.tmdb.org/t/p/w500/ + код: lqoMzCcZYEFK729d6qzt349fB4o.jpg

Look here docs

START

FINISH

Scroll. Observer API

Intersection Observer API Не потрібна бібліотека!!!

const options = {
  root: document.querySelector("#scrollArea"), // або null
  rootMargin: "200px", // Хpx від дна
  threshold: 1.0, // % обэкта
};

const observer = new IntersectionObserver(callback, options);

Після нашого списку має бути відомий нам елемент щоб на нього орієнтуватись це буде div class="js-guard"/div

Після підключення observer від буде викликатися відразу і за 200рх до наближення. Перший раз від просто повідомив нас що відн підключився" isIntersecting: false Другий раз вже він реально побачив наш елемент isIntersecting: true

Опис проекту:

Перший раз треба натиснути на кнопку "LOAD MORE_2"
Observer буде шукати елемент js-guard"/div який в самому низу
За 10px до появи цього елемента спрацює подія "onLoad"
Коли сторінки пагінації закінчаться observer треба знімати observer.unobserve(guardTarget);
Коли повільний інтернет картинки можуть не завантажитись а лише заголовки. Тоді низ буде близько і спрацює observer. Щоб цього уникнути треба задати висоту лішкам

START Observer

За 10px до цього місця

FINISH Observer

stop 1:13:00 Vid #2

Практика Репета. Покемони

My notes

web server відправляє HTML
API server відправляє JSON
Методи HTTP протокола (GET, POST ...)
resp.json()
resp.text() - for csv
resp.blob() - img video audio

HTTP. API

Зміст

Протокол HTTP

Протокол HTTPS

REST API

API

REST

REST API

HTTP-методи

Шляхи

Коди відповідей

AJAX

Fetch API

Вкладка Network

Робота з публічним REST API

Fetch users (Ex)

Параметри рядка запиту

Fetch users sort (Ex)

Клас URLSearchParams

HTTP-заголовки

Крос-доменні запити

Пагінація

Fetch posts Пагінація (Ex)

Список API серверів

Практика

Популярна апішка для навчання

SWAPI

Weather API

Мій проект Weather API

Завдання:

Рішення

Будуємо строку посилання за Request Parameters: (Required)

Практика: Пагінація, Infinity scroll

Пагінація

MOVE JS LIST

START

FINISH

Scroll. Observer API

Опис проекту:

START Observer

FINISH Observer

Практика Репета. Покемони

My notes