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

Заголовки та ехо-ендпоінт

5 завдань

Додавайте кастомні HTTP-заголовки до запитів і використовуйте ехо-ендпоінт для перевірки.

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

HTTP-заголовки

#
HTTP-заголовки — це пари ключ-значення, що передаються разом із запитом або відповіддю: вони несуть метадані про тип контенту, токени автентифікації та кастомну інформацію. У `fetch` заголовки запиту встановлюються в об'єкті options: ```javascript const response = await fetch(url, { headers: { 'Authorization': 'Token abc123', 'X-Custom-Header': 'my-value', }, }); ``` Можна також використовувати клас `Headers` для більш структурованого підходу: ```javascript const headers = new Headers(); headers.set('Authorization', 'Token abc123'); headers.set('X-Request-ID', '42'); const response = await fetch(url, { headers }); ``` Ендпоінт `/api/echo/` відображає назад саме те, що ви надіслали — він корисний для перевірки того, що заголовки доходять так, як очікується: ```javascript const response = await fetch('https://apilearn.tukas.dev/api/echo/', { headers: { 'X-Custom-Header': 'hello' }, }); const data = await response.json(); // data.headers містить заголовки, отримані сервером console.log(data.headers['X-Custom-Header']); // "hello" ``` Ехо-ендпоінт повертає: ```javascript { method: "GET", headers: { /* всі заголовки запиту */ }, body: null, query_params: {} } ```

Використання ехо-ендпоінта

#
Перевіряємо, які заголовки ми насправді надсилаємо: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function inspectHeaders() { const response = await fetch(`${BASE_URL}/api/echo/`, { headers: { 'X-My-Header': 'test-value', 'X-Request-ID': '123', }, }); const data = await response.json(); console.log('Метод:', data.method); console.log('Мій заголовок:', data.headers['X-My-Header']); console.log('Всі заголовки:', data.headers); } inspectHeaders(); ``` Допоміжна функція, що будує обгортку `fetch` з дефолтними заголовками: ```javascript function createClient(baseUrl, token) { const defaultHeaders = { 'Authorization': `Token ${token}`, 'Content-Type': 'application/json', }; return async function apiFetch(path, options = {}) { const response = await fetch(`${baseUrl}${path}`, { ...options, headers: { ...defaultHeaders, ...options.headers }, }); return response.json(); }; } // Токен показано в наступній темі const client = createClient(BASE_URL, 'YOUR_TOKEN'); const profile = await client('/api/users/profile/'); console.log(profile.username); ``` Перевіряємо, що `Content-Type` встановлено при надсиланні JSON: ```javascript const response = await fetch(`${BASE_URL}/api/echo/`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }), }); const echo = await response.json(); console.log(echo.headers['Content-Type']); // "application/json" ```

Довідник заголовків та ехо

#
**Встановлення заголовків у fetch** ```javascript // Об'єктний літерал (найпростіший спосіб) fetch(url, { headers: { 'X-Key': 'value' } }) // Клас Headers const headers = new Headers({ 'X-Key': 'value' }); headers.set('X-Other', 'val2'); fetch(url, { headers }) ``` **Поширені заголовки** ``` Authorization Токен: "Token <token>" JWT: "Bearer <access_token>" Content-Type Для POST/PATCH/PUT з JSON-тілом: "application/json" X-* Будь-який кастомний заголовок, що починається з X- ``` **Ехо-ендпоінт** ``` GET /api/echo/ Повертає деталі запиту назад як JSON ``` **Форма відповіді ехо** ```javascript { method: "GET", path: "/api/echo/", query_params: {}, headers: { "X-My-Name": "Alice", // кастомні заголовки зберігають оригінальний регістр ... }, body: null, content_type: null, auth: { authenticated: false, type: null, user: null, user_id: null } } ``` **Регістр кастомних заголовків** ``` Сервер повертає кастомні заголовки в оригінальному регістрі. "X-My-Name" залишається "X-My-Name" у відповіді ехо. ``` **Злиття дефолтних і per-request заголовків** ```javascript const merged = { ...defaultHeaders, ...requestHeaders }; ```

Вправи:

01

Надіслати кастомний заголовок

#

Надішліть GET-запит до `/api/echo/` з кастомним заголовком `X-My-Name: YourName`. Виведіть значення цього заголовка з відповіді ехо.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // GET /api/echo/ із заголовком X-My-Name
  // вивести відображене значення заголовка
}

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

async function main() {
  const response = await fetch(`${BASE_URL}/api/echo/`, {
    headers: { 'X-My-Name': 'Alice' },
  });
  const data = await response.json();
  console.log(data.headers['X-My-Name']);
}

main();
02

Надіслати кілька заголовків

#

Надішліть GET `/api/echo/` з трьома заголовками: `X-App: my-app`, `X-Version: 1.0` та `X-Request-ID: 42`. Виведіть повний об'єкт `headers` з відповіді.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // надіслати 3 кастомних заголовки, вивести data.headers
}

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

async function main() {
  const response = await fetch(`${BASE_URL}/api/echo/`, {
    headers: {
      'X-App': 'my-app',
      'X-Version': '1.0',
      'X-Request-ID': '42',
    },
  });
  const data = await response.json();
  console.log(data.headers);
}

main();
03

Перевірити метод та параметри запиту через ехо

#

Надішліть GET `/api/echo/?color=blue&size=large`. Виведіть метод та об'єкт `query_params` з відповіді.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // GET /api/echo/ із двома параметрами запиту
  // вивести method і query_params
}

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

async function main() {
  const params = new URLSearchParams({ color: 'blue', size: 'large' });
  const response = await fetch(`${BASE_URL}/api/echo/?${params}`);
  const data = await response.json();
  console.log(data.method);
  console.log(data.query_params);
}

main();
04

POST із заголовком Content-Type

#

Надішліть POST до `/api/echo/` з JSON-тілом `{name: "test"}` та заголовком `Content-Type: application/json`. Виведіть відображений заголовок `Content-Type` та поле `body`.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // POST /api/echo/ із JSON-тілом та заголовком Content-Type
  // вивести content-type заголовок і body з відповіді
}

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

async function main() {
  const response = await fetch(`${BASE_URL}/api/echo/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'test' }),
  });
  const data = await response.json();
  console.log(data.headers['content-type'] ?? data.headers['Content-Type']);
  console.log(data.body);
}

main();
05

Використати клас Headers

#

Побудуйте об'єкт `Headers` за допомогою `.set()`, додайте принаймні два кастомних заголовки, потім передайте його в GET-запит до `/api/echo/`. Виведіть відображені заголовки.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const headers = new Headers();
  // додати заголовки через .set()
  // fetch і вивести відображені заголовки
}

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

async function main() {
  const headers = new Headers();
  headers.set('X-Client', 'js-api-course');
  headers.set('X-Version', '2.0');

  const response = await fetch(`${BASE_URL}/api/echo/`, { headers });
  const data = await response.json();
  console.log(data.headers);
}

main();