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

Редиректи

5 завдань

Розберіться з HTTP-редиректами і керуйте тим, як fetch їх обробляє.

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

Як працюють HTTP-редиректи

#
HTTP-редирект — це відповідь зі статусом 3xx та заголовком `Location`, що вказує на новий URL. Очікується, що клієнт автоматично перейде за цим URL. `fetch` автоматично слідує редиректам за замовчуванням. Кінцевий URL після всіх редиректів доступний через `response.url`: ```javascript const response = await fetch('https://apilearn.tukas.dev/api/redirect/'); console.log(response.url); // кінцевий URL після редиректів console.log(response.status); // статус кінцевої відповіді (наприклад 200) ``` API має два ендпоінти з редиректом: ``` GET /api/redirect/ Редирект на /api/products/ GET /api/redirect/permanent/ Постійний редирект (301) на /api/products/ ``` Щоб заборонити `fetch` слідувати редиректам, встановіть `redirect: 'manual'`: ```javascript const response = await fetch('https://apilearn.tukas.dev/api/redirect/', { redirect: 'manual', }); // response.status дорівнює 0, а response.type — 'opaqueredirect' у ручному режимі // response.url — URL редиректу в деяких середовищах ``` Значення опції `redirect`: ``` "follow" (за замовчуванням) Автоматично слідувати всім редиректам "manual" Не слідувати — зупинитися на першій відповіді з редиректом "error" Кинути помилку при виникненні редиректу ```

Робота з редиректами на практиці

#
Перевіряємо, куди веде редирект: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function checkRedirect(url) { const response = await fetch(url); console.log('Кінцевий URL:', response.url); console.log('Фінальний статус:', response.status); console.log('OK:', response.ok); return response; } checkRedirect(`${BASE_URL}/api/redirect/`); ``` Визначаємо, чи відбувся редирект, порівнюючи вихідний URL з `response.url`: ```javascript async function wasRedirected(url) { const response = await fetch(url); const redirected = response.url !== url; if (redirected) { console.log(`Перенаправлено з ${url} на ${response.url}`); } else { console.log('Редиректу не було'); } return response; } wasRedirected(`${BASE_URL}/api/redirect/`); ``` Перевіряємо відповідь редиректу до переходу (Node.js / середовища, що підтримують це): ```javascript const response = await fetch(`${BASE_URL}/api/redirect/`, { redirect: 'manual', }); console.log('Тип:', response.type); // "opaqueredirect" console.log('Статус:', response.status); // 0 у ручному режимі ```

Довідник редиректів

#
**Ендпоінти редиректів** ``` GET /api/redirect/ Тимчасовий редирект → /api/products/ GET /api/redirect/permanent/ Постійний редирект (301) → /api/products/ ``` **Опція redirect у fetch** ```javascript fetch(url, { redirect: 'follow' }) // за замовчуванням — слідувати автоматично fetch(url, { redirect: 'manual' }) // зупинитися на редиректі, без помилки fetch(url, { redirect: 'error' }) // кинути TypeError при редиректі ``` **Визначення редиректу** ```javascript const response = await fetch(url); const redirected = response.url !== url; // true, якщо редирект відбувся console.log(response.url); // кінцевий URL після редиректу ``` **Поширені коди статусу редиректів** ``` 301 Moved Permanently — кешуйте новий URL 302 Found (Temporary) — не кешуйте 303 See Other — зазвичай після POST, редирект на GET 307 Temporary Redirect — аналог 302, але метод зберігається 308 Permanent Redirect — аналог 301, але метод зберігається ```

Вправи:

01

Слідувати за редиректом

#
Отримайте `/api/redirect/`. Виведіть `response.url` (кінцевий URL після редиректу) та `response.status`.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // fetch /api/redirect/ і вивести кінцевий URL та статус
}

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

async function main() {
  const response = await fetch(`${BASE_URL}/api/redirect/`);
  console.log(response.url);
  console.log(response.status);
}

main();
02

Визначити, чи відбувся редирект

#
Отримайте `/api/redirect/` і порівняйте вихідний URL з `response.url`. Виведіть `true`, якщо редирект відбувся, `false` в іншому випадку.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const url = `${BASE_URL}/api/redirect/`;
  // fetch і порівняти url з response.url
}

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

async function main() {
  const url = `${BASE_URL}/api/redirect/`;
  const response = await fetch(url);
  console.log(response.url !== url);
}

main();
03

Порівняти тимчасовий та постійний редирект

#
Отримайте `/api/redirect/` і `/api/redirect/permanent/`. Для кожного виведіть кінцевий `response.url` та `response.status`.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // fetch обидва ендпоінти і вивести кінцевий url + status для кожного
}

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

async function main() {
  const r1 = await fetch(`${BASE_URL}/api/redirect/`);
  console.log('Temporary:', r1.url, r1.status);

  const r2 = await fetch(`${BASE_URL}/api/redirect/permanent/`);
  console.log('Permanent:', r2.url, r2.status);
}

main();
04

Зупинитись на редиректі в ручному режимі

#
Отримайте `/api/redirect/` з `redirect: "manual"`. Виведіть `response.type` та `response.status`. Потім отримайте той самий URL зі стандартним `redirect: "follow"` і порівняйте.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // ручний редирект
  // автоматичний редирект
  // порівняти
}

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

async function main() {
  const manual = await fetch(`${BASE_URL}/api/redirect/`, { redirect: 'manual' });
  console.log('Manual — type:', manual.type, 'status:', manual.status);

  const follow = await fetch(`${BASE_URL}/api/redirect/`, { redirect: 'follow' });
  console.log('Follow — url:', follow.url, 'status:', follow.status);
}

main();
05

Отримати дані через редирект

#
Отримайте `/api/redirect/` і розберіть JSON-тіло з кінцевої відповіді. Виведіть `data.count`, щоб підтвердити, що ви отримали список товарів.
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // fetch через редирект і прочитати тіло відповіді
}

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

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

main();