Потік токен-автентифікації
#**Короткий спосіб написати fetch-виклики**
У секції Beginner кожен запит через fetch використовував два окремі рядки `await`:
```javascript
const response = await fetch(url);
const data = await response.json();
```
Далі ви також побачите однорядковий скорочений запис із `.then()`:
```javascript
const data = await fetch(url).then(r => r.json());
```
Ці два записи рівнозначні. `.then(r => r.json())` — це колбек, прикріплений безпосередньо до Promise, що повертається `fetch()`. Коли сервер відповідає, `.then()` одразу викликає `r.json()` і повертає новий Promise. Зовнішній `await` чекає виконання цього Promise з JSON.
Скорочений запис зручний, коли не потрібно перевіряти `response.status` або `response.ok` перед читанням тіла. Коли потрібна перевірка помилок, використовуйте двокроковий варіант — він дає доступ до `response` до читання тіла:
```javascript
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
```
---
Токен-автентифікація працює у два кроки: отримати токен один раз, потім включати його у кожен наступний запит.
**Крок 1 — Зареєструвати нового користувача:**
```javascript
const response = await fetch('https://apilearn.tukas.dev/api/auth/register/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: 'alice42',
email: '[email protected]',
password: 'SecurePass123!',
}),
});
const data = await response.json();
console.log(data.token); // токен повертається одразу при реєстрації
```
**Крок 2 — Або увійти для отримання токена існуючого акаунту:**
```javascript
const response = await fetch('https://apilearn.tukas.dev/api/auth/token/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'alice42', password: 'SecurePass123!' }),
});
const { token } = await response.json();
```
**Крок 3 — Використати токен у заголовку `Authorization`:**
```javascript
const headers = {
'Authorization': `Token ${token}`,
'Content-Type': 'application/json',
};
const profile = await fetch('https://apilearn.tukas.dev/api/users/profile/', {
headers,
}).then(r => r.json());
console.log(profile.username);
```
Токен не закінчується — зберігайте та перевикористовуйте його між запитами. Формат заголовка `Authorization` — рівно `Token <token>` (з великої літери T, пробіл, потім значення токена).