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();