Fetch API

fetch(url) возвращает Promise с Response. Response содержит: status, ok, headers. Для получения данных вызовите response.json() (тоже Promise). fetch НЕ reject на HTTP 404/500 — проверяйте response.ok. CORS — ограничение браузера для cross-origin запросов.

Простейший GET: const response = await fetch('https://api.example.com/users'); const users = await response.json(); console.log(users);

Fetch возвращает Promise<Response>. Response — это не данные, а «обёртка» с метаданными.

Проверка ошибок: const response = await fetch('/api/data');

if (!response.ok) { throw new Error(HTTP ${response.status}: ${response.statusText}); }

const data = await response.json();

Важно: fetch НЕ reject автоматически на HTTP 404/500! Он reject ТОЛЬКО при сетевой ошибке (нет соединения, DNS).

POST запрос: const response = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Анна', email: 'anna@test.com' }) });

if (!response.ok) throw new Error('Ошибка'); const result = await response.json();

Response свойства:

• response.ok — true если status 200-299
• response.status — HTTP статус (200, 404, 500)
• response.headers — заголовки ответа
• response.url — итоговый URL (после редиректов)

HTTP основы:

• GET — получить данные
• POST — создать данные
• PUT — обновить данные целиком
• PATCH — обновить частично
• DELETE — удалить данные

CORS (Cross-Origin Resource Sharing): Браузер блокирует запросы к другому домену (origin), если сервер не разрешает это через заголовки.

origin = protocol + domain + port https://example.com:443

same-origin: https://example.com/page cross-origin: https://other.com/api

Сервер разрешает через: Access-Control-Allow-Origin: https://example.com

CORS — НЕ ошибка сервера. Это ограничение браузера для безопасности.

fetch — как отправка письма. Вы пишете запрос (URL + метод), отправляете (fetch), получаете конверт (Response). Конверт содержит не только письмо (данные), но и служебную информацию (status, headers). Чтобы прочитать письмо, нужно вскрыть конверт (response.json()).

**Самый простой:**

const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const todo = await response.json();
console.log(todo.title); // 'delectus aut autem'

Простейший GET запрос с парсингом JSON.

**Простой:**

async function getUsers() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    
    const users = await response.json();
    users.forEach(user => console.log(user.name));
    
  } catch (error) {
    console.log(`Ошибка: ${error.message}`);
  }
}

await getUsers();

GET с проверкой response.ok и обработкой ошибок.

**Реальный пример:**

async function createPost(title, body) {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ title, body, userId: 1 })
  });
  
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  
  const post = await response.json();
  console.log(`Создан пост #${post.id}`);
  return post;
}

await createPost('Новый пост', 'Текст поста');

POST запрос с JSON телом и обработкой ответа.

**Неправильно:** Думать, что fetch reject на HTTP 404/500

**Почему:** fetch resolve с Response даже на 404/500. Reject только при сетевой ошибке.

**Правильно:** Всегда проверяйте response.ok или response.status.

**Неправильно:** Забывать await перед response.json()

**Почему:** response.json() возвращает Promise, а не объект.

**Правильно:** const data = await response.json();

**Неправильно:** Не устанавливать Content-Type для POST

**Почему:** Сервер может не распознать тело запроса без правильного Content-Type.

**Правильно:** headers: { 'Content-Type': 'application/json' }

**Неправильно:** Путать CORS с ошибкой сервера

**Почему:** CORS — ограничение браузера. Сервер может работать нормально, но браузер блокирует ответ.

**Правильно:** CORS = браузерное ограничение, не серверная ошибка.

• fetch возвращает Promise<Response>
• response.json() — тоже Promise, нужен await
• fetch НЕ reject на HTTP 404/500 — проверяйте response.ok
• POST: method, headers, body (JSON.stringify)
• CORS — ограничение браузера для cross-origin запросов
• GET — получение, POST — создание, PUT/PATCH — обновление, DELETE — удаление

Назад: Вы понимаете async/await и промисы (JA4-JA6) — теперь вы применяете их к реальным HTTP-запросам.

Вперёд: Вы завершили JS Async! Дальше — DOM Advanced: события, делегирование и браузерные API.

• MDN: Fetch API