JavaScript · API · Початковий

Перший запит

5 завдань

Зробіть свій перший HTTP-запит за допомогою fetch і прочитайте JSON-відповідь.

Короткий вступ до теми та пояснення перед вправами (вправи нижче):

HTTP-запити за допомогою fetch

#
У цьому розділі ми будемо практикуватися на спеціальному сайті, створеному мною для цього. Цей сайт є фейковим інтернет-магазином, який повністю працює як справжній. У нього є і звичайний користувальницький інтерфейс у браузері і повне покриття всіх можливостей через RESTful API. Нижче я надам відразу кілька посилань, щоб ви могли перейти на цей сайт і ознайомитися з ним перед матеріалами та вправами цього розділу: Головна сторінка сайту з інформацією про нього: [https://apilearn.tukas.dev/](https://apilearn.tukas.dev/) Спеціально зроблена детальна документація з його API (не переживайте, ви зараз почнете її розуміти): [https://apilearn.tukas.dev/api/docs/](https://apilearn.tukas.dev/api/docs/) Добре, після знайомства з сайтом, давайте приступимо до вивчення роботи з API. `fetch` — це вбудована функція JavaScript для HTTP-запитів. Коли ви її викликаєте, браузер надсилає запит на сервер — але відповідь займає час. JavaScript вирішує це за допомогою **асинхронного виконання**: замість того, щоб заморожувати всю програму під час очікування, `fetch` повертає **Promise** — об'єкт, який міститиме відповідь після її отримання. Найчистіший спосіб працювати з Promise — `async/await`. Позначте функцію як `async`, потім використовуйте `await`, щоб призупинити її до виконання Promise. Решта програми продовжує виконуватись: ```javascript async function main() { const response = await fetch('https://apilearn.tukas.dev/api/products/'); const data = await response.json(); console.log(data); } main(); ``` З `fetch` завжди потрібні **два виклики `await`**: ```javascript const response = await fetch(url); // 1-й await: чекаємо відповіді сервера const data = await response.json(); // 2-й await: читаємо та парсимо тіло ``` Чому два? `fetch` завершується, щойно сервер надсилає **заголовки** — до того, як прийде тіло. Виклик `response.json()` починає читати тіло — це друга асинхронна операція. Об'єкт `response` між двома await має корисні властивості: ```javascript console.log(response.status); // 200, 404, 500, ... console.log(response.ok); // true, якщо статус 200-299 console.log(response.url); // кінцевий URL після редиректів ``` `response.ok` — ключова властивість для перевірки помилок: `true` для будь-якого статусу 2xx, `false` для 4xx/5xx. На відміну від `axios`, звичайний `fetch` ніколи не кидає виняток при HTTP-помилках — ви завжди отримуєте об'єкт `response`.

Читання відповіді

#
Повний приклад — отримуємо список продуктів і читаємо поля: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function main() { const response = await fetch(`${BASE_URL}/api/products/`); const data = await response.json(); console.log('Статус:', response.status); // 200 console.log('Всього товарів:', data.count); // 372 console.log('На цій сторінці:', data.results.length); // 20 const first = data.results[0]; console.log(first.name, first.price); console.log(first.category.name); // category — об'єкт: {id, name, slug} } main(); ``` Отримуємо один товар за id: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function getProduct(id) { const response = await fetch(`${BASE_URL}/api/products/${id}/`); const product = await response.json(); console.log(product.name); // "Tea Table Set with Three Chairs" console.log(product.price); // "150.00" (рядок) console.log(product.sell_price); // "135.00" (після знижки) console.log(product.slug); // "tea-table-set-three-chairs" console.log(product.category.name); // "Kitchen" console.log(product.category.slug); // "kitchen" return product; } async function main() { const p = await getProduct(1); console.log(p); } main(); ``` Зверніть увагу: `price` — це рядок, а не число. Використовуйте `parseFloat(product.price)`, якщо потрібно виконувати математичні операції.

Шпаргалка fetch та Response

#
**fetch(url, options)** ```javascript fetch(url) // GET-запит fetch(url, { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }) ``` **Властивості Response** ``` response.status number HTTP-код статусу (200, 404, ...) response.ok boolean true, якщо статус 200-299 response.url string Кінцевий URL після редиректів response.headers Headers Об'єкт заголовків відповіді ``` **Методи Response** ``` await response.json() Парсить тіло як JSON → об'єкт await response.text() Парсить тіло як звичайний текст → рядок ``` **Завжди два await** ```javascript const response = await fetch(url); // чекаємо заголовки const data = await response.json(); // чекаємо тіло ``` **Поля об'єкта Product** ``` id number Числовий id name string Назва товару slug string URL-безпечний ідентифікатор price string Наприклад "150.00" — конвертуйте через parseFloat() sell_price string Ціна зі знижкою discount string Сума знижки quantity number Кількість на складі category object {id, name, slug} image string URL зображення ```

Вправи:

01

Отримати список товарів

#
Зробіть GET-запит до `/api/products/` за допомогою `fetch`. Виведіть загальну кількість товарів (`count`) та кількість результатів на першій сторінці.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // 1. fetch /api/products/
  // 2. вивести count та results.length
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/products/`);
  const data = await response.json();
  console.log(data.count);
  console.log(data.results.length);
}

main();
02

Отримати один товар

#
Отримайте товар з id 1 за адресою `/api/products/1/`. Виведіть його `name`, `price` та `slug`.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // GET /api/products/1/
  // вивести name, price, slug
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/products/1/`);
  const product = await response.json();
  console.log(product.name);
  console.log(product.price);
  console.log(product.slug);
}

main();
03

Перевірити response.status та response.ok

#
Отримайте `/api/products/99999/` (неіснуючий товар). Виведіть `status` та значення `response.ok`. Потім отримайте `/api/products/1/` і порівняйте.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // Fetch неіснуючого товару — перевірити status і ok
  // Fetch реального товару — перевірити status і ok
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const r1 = await fetch(`${BASE_URL}/api/products/99999/`);
  console.log(r1.status, r1.ok);  // 404 false

  const r2 = await fetch(`${BASE_URL}/api/products/1/`);
  console.log(r2.status, r2.ok);  // 200 true
}

main();
04

Отримати категорії

#
Зробіть запит до `/api/categories/`. Виведіть загальну кількість категорій та `name` кожної.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // GET /api/categories/ і вивести count + назву кожної
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/categories/`);
  const data = await response.json();
  console.log(data.count);
  for (const cat of data.results) {
    console.log(cat.name);
  }
}

main();
05

Назва першого товару зі списку

#
Отримайте `/api/products/`, візьміть перший елемент з `results` та виведіть його назву і ціну. Конвертуйте ціну в число через `parseFloat` і теж виведіть.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // fetch products, взяти перший результат, вивести name, рядок price та parseFloat(price)
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/products/`);
  const data = await response.json();
  const first = data.results[0];
  console.log(first.name);
  console.log(first.price);
  console.log(parseFloat(first.price));
}

main();