fetch и HTTP

01 HTTP: как браузер разговаривает с сервером

Клиент — это ваш браузер (или ваш код в нём). Сервер — компьютер, на котором лежат данные. Они общаются по правилам протокола HTTP: клиент шлёт запрос (request), сервер возвращает ответ (response). Всегда по очереди: сервер сам первым не пишет.

Из чего состоит адрес

Адрес ресурса называется URL. В нём несколько частей, и браузер умеет их разбирать с помощью встроенного класса URL.

const url = new URL("https://jsonplaceholder.typicode.com/todos?userId=1&_limit=3");

console.log(url.protocol);               // https:
console.log(url.hostname);               // jsonplaceholder.typicode.com
console.log(url.pathname);               // /todos
console.log(url.searchParams.get("userId"));   // 1  (всегда строка!)

Запрос и ответ

Запрос состоит из четырёх частей, ответ — из трёх. Запомните эту схему: она нужна, чтобы понимать любую документацию к API.

Методы: глагол запроса

Метод говорит серверу, что мы хотим сделать. Для работы с данными есть пять основных. Адрес у них может быть один и тот же — отличается только глагол.

Если метод не указан, браузер использует GET. Сегодня мы почти всё время будем получать данные, а к остальным методам придём в разделе 05.

Коды статуса: число, которое сервер говорит первым

Первая цифра кода — это группа. Если запомнить группы, то 90% кодов вы поймёте без справочника.

Заголовки: служебные записки

Content-Type

Какого типа тело. Для JSON это application/json. Есть и у запроса (что мы отправляем), и у ответа (что получили).

Accept

В запросе: «какой формат ответа я понимаю».

Authorization

В запросе: ключ или токен, подтверждающий, кто вы. Без него закрытые API ответят 401. В этом уроке он не нужен — мы берём открытые API.

JSON: язык, на котором говорят API

Данные по сети ходят как текст. Объекты и массивы превращают в текст формата JSON и обратно: JSON.stringify(объект) → строка, JSON.parse(строка) → объект. Правила строже, чем в JS: ключи и строки только в двойных кавычках, никаких комментариев и запятых в конце.

const student = { name: "Мадина", age: 17, courses: ["JS", "CSS"] };

const text = JSON.stringify(student);
console.log(text);                  // это строка
console.log(typeof text);

const back = JSON.parse(text);
console.log(back.name, back.courses.length);

const text = "{ name: 'Мадина' }";    // ✖ ключ без кавычек, строка в одинарных

const student = JSON.parse(text);
console.log(student.name);

Читать подробнее: learn.javascript.ru — Формат JSON · MDN — Обзор HTTP · MDN — Коды ответов HTTP

const url = new URL("https://shop.example.tj/catalog/shoes?category=kids&page=2");

// выведите url.hostname, url.pathname и параметр category

shop.example.tj
/catalog/shoes
kids

function describeStatus(code) {
  // ваш код
}

for (const code of [200, 201, 301, 404, 500, 99]) {
  console.log(code + ": " + describeStatus(code));
}

200: успех
201: успех
301: перенаправление
404: ошибка клиента
500: ошибка сервера
99: неизвестно

const text = "{ name: 'Мадина', age: 17, active: true, }";

const student = JSON.parse(text);
console.log(student.name + " " + student.age);

Мадина 17

function buildUrl(base, params) {
  // ваш код
}

console.log(buildUrl("https://api.example.tj/products", { q: "плов", page: 2, limit: 10 }));
console.log(buildUrl("https://api.example.tj/products", {}));

https://api.example.tj/products?q=%D0%BF%D0%BB%D0%BE%D0%B2&page=2&limit=10
https://api.example.tj/products

02 fetch: первый запрос

fetch(url) — встроенная функция браузера для HTTP-запросов. Подключать ничего не нужно. Она возвращает промис (урок 13), поэтому с ней работают через then или, удобнее, через async / await. Попробуем взять одну задачу из учебного сервера jsonplaceholder — он создан специально, чтобы на нём тренироваться:

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const todo = await response.json();

  console.log(todo.title);
  console.log("выполнена?", todo.completed);
}

main();

Строк мало, но здесь есть два await, и это не случайность. Давайте разберёмся, зачем.

1. fetch(url) отправляет запрос. Промис выполнится, как только придёт начало ответа: статус и заголовки.
2. await даёт нам объект response — это «конверт»: в нём статус и заголовки, а тело ещё может ехать по сети.
3. response.json() дочитывает тело и превращает JSON-текст в объект. Это тоже промис — поэтому второй await.

Что есть у response

response.status

Число — код статуса: 200, 404, 500…

response.ok

true, если статус от 200 до 299. Самая полезная проверка — к ней мы вернёмся в разделе 04.

response.headers

Заголовки ответа. Читаются методом get: response.headers.get("content-type").

response.json()

Прочитать тело как JSON → получим объект или массив.

response.text()

Прочитать тело как обычный текст (удобно, если пришёл не JSON).

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");

  console.log("статус:", response.status);
  console.log("ok:", response.ok);
  console.log("тип данных:", response.headers.get("content-type"));
}

main();

То же самое через then

Вариант без async / await тоже встречается в чужом коде — вы должны его узнавать. Смысл тот же, только вложенность другая:

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => response.json())
  .then((todo) => {
    console.log("Задача:", todo.title);
  });

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const todo = response.json();     // ✖ забыли await — это промис, а не объект

  console.log(todo.title);          // undefined
}

main();

Читать подробнее: learn.javascript.ru — Fetch · MDN — Использование Fetch

async function main() {
  // запрос, response.json(), вывод
}

main();

1
1

async function main() {
  // fetch, потом три строки вывода
}

main();

200
true
true

const actual = [];
const log = (label) => actual.push(label);

async function main() {
  log("A");
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  log("B");
  await response.json();
  log("C");
}

main();
log("D");

const prediction = [];   // ваш прогноз: порядок меток

// --- проверка, не меняйте ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 3000);

Верно!

const API = "https://jsonplaceholder.typicode.com";

async function main() {
  // 1) загрузить задачу 1
  // 2) загрузить пользователя по todo.userId
  // 3) вывести строку
}

main();

Задача «delectus aut autem» у Leanne Graham

03 Тело ответа: json(), text() и параметры запроса

Серверы отдают данные двух видов: один объект (/users/1) и список (/users — массив). После response.json() вы получаете обычные объекты и массивы JavaScript, а с ними вы уже умеете работать: map, filter, деструктуризация, ?..

const API = "https://jsonplaceholder.typicode.com";

async function main() {
  const response = await fetch(API + "/users");
  const users = await response.json();

  console.log("Пользователей:", users.length);

  const names = users.slice(0, 3).map((user) => user.name);
  console.log(names.join(", "));
}

main();

Вложенные данные

Реальные ответы почти всегда вложенные: у пользователя есть адрес, у адреса — город. Деструктуризация из урока 7 здесь очень кстати:

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const { name, email, address: { city } } = await response.json();

  console.log(`${name}, ${city}, ${email}`);
}

main();

Параметры запроса: просим только нужное

Скачивать всё подряд — расточительно. Большинство API понимают параметры после знака ?: фильтры, лимиты, поиск. В jsonplaceholder, например, ?_limit=3 вернёт только три записи, а ?userId=2 — только записи второго пользователя.

async function main() {
  const url = "https://jsonplaceholder.typicode.com/todos?userId=2&_limit=3";
  const todos = await (await fetch(url)).json();

  console.log("Получили:", todos.length);
  console.log("Все от пользователя 2:", todos.every((t) => t.userId === 2));
}

main();

Строка await (await fetch(url)).json() — сжатая запись двух шагов. Читается тяжелее, поэтому пока лучше писать по шагам.

json() или text()?

json() ожидает на входе корректный JSON. Если сервер прислал HTML-страницу с ошибкой или пустой ответ, json() бросит SyntaxError. А text() всегда вернёт текст — его можно показать или записать в лог. Чтобы потренироваться без интернета, мы можем создать «поддельный» ответ: конструктор new Response(текст) делает точно такой же объект, как от настоящего сервера.

async function main() {
  const response = new Response(JSON.stringify({ city: "Душанбе", temp: 21 }));

  const data = await response.json();
  console.log(data.city + ": " + data.temp);
}

main();

async function main() {
  const response = new Response(JSON.stringify({ city: "Душанбе" }));

  const text = await response.text();   // тело прочитано
  const data = await response.json();   // ✖ читаем второй раз

  console.log(text, data);
}

main();

Читать подробнее: learn.javascript.ru — Fetch: чтение ответа · MDN — Response.json()

async function main() {
  // запрос, json(), цикл с номерами
}

main();

1. delectus aut autem
2. quis ut nam facilis et officia qui
3. fugiat veniam minus

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  // деструктуризация и вывод
}

main();

Leanne Graham — Gwenborough (Bret)

async function main() {
  // запрос с параметром userId=1
  // всего и выполнено
}

main();

Всего: 20
Выполнено: 11

async function main() {
  const response = new Response(JSON.stringify({ city: "Душанбе", temp: 21 }));

  const raw = await response.text();
  console.log("Длина текста:", raw.length);

  const data = await response.json();
  console.log(data.city + ": " + data.temp + "°C");
}

main();

Длина текста: 28
Душанбе: 21°C

04 Ошибки: 404 — это не ошибка fetch

Это самое неожиданное место для новичков. У запроса может быть два совершенно разных вида неудач — и fetch относится к ним по-разному.

Посмотрите: запрос несуществующей задачи не бросил ошибку. catch молчит, а ok равно false.

async function main() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/99999");
    console.log("запрос дошёл до сервера");
    console.log("статус:", response.status, "ok:", response.ok);
  } catch (error) {
    console.log("сюда мы не попадём");
  }
}

main();

Правильная схема: проверяем ok и сами бросаем ошибку

Чтобы обе неудачи обрабатывались в одном месте, превращаем «плохой статус» в настоящую ошибку:

async function loadTodo(id) {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/" + id);

  if (!response.ok) {
    throw new Error("HTTP " + response.status);   // 404 → настоящая ошибка
  }
  return response.json();
}

async function main() {
  for (const id of [1, 99999]) {
    try {
      const todo = await loadTodo(id);
      console.log("Нашли:", todo.title);
    } catch (error) {
      console.log("Ошибка:", error.message);
    }
  }
}

main();

Сетевая ошибка: сервера нет вообще

Когда запрос не смог добраться до сервера, fetch отклоняет промис, и catch получает ошибку типа TypeError. Чтобы сымитировать это, возьмём адрес, которого точно не существует (зона .invalid зарезервирована под «несуществующие» адреса):

async function main() {
  try {
    await fetch("https://no-such-server.invalid/data");
    console.log("не дойдём досюда");
  } catch (error) {
    console.log("Сеть недоступна. Тип ошибки:", error.name);
  }
}

main();

Текст самой ошибки в разных браузерах разный (в Chrome — Failed to fetch, в Safari — Load failed), поэтому полагаться на error.message нельзя. Надёжнее смотреть на error.name или просто показать пользователю свой понятный текст.

Когда тело — не JSON

Третья неприятность: сервер ответил, но в теле не JSON (например, HTML-страница «Сервис временно недоступен»). Тогда response.json() бросит SyntaxError. Проверим на поддельном ответе:

async function main() {
  const response = new Response("<html>Сервис временно недоступен</html>", { status: 503 });

  try {
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Не удалось разобрать JSON. Тип ошибки:", error.name);
  }
}

main();

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/99999");
  const todo = await response.json();      // ✖ статус 404, но ошибки нет

  console.log("Название задачи:", todo.title);   // undefined
}

main();

finally: убираем «Загрузка…» при любом исходе

Блок finally выполняется и после успеха, и после ошибки. Это идеальное место, чтобы спрятать индикатор загрузки или снова включить кнопку (мы делали это в уроке 13).

Читать подробнее: learn.javascript.ru — Fetch: response.ok · MDN — Response.ok · MDN — CORS

async function main() {
  // fetch и одна строка вывода
}

main();

404 false

async function loadTodo(id) {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/" + id);
  // проверка ok и возврат данных
}

async function main() {
  for (const id of [1, 99999]) {
    try {
      const todo = await loadTodo(id);
      console.log(todo.title);
    } catch (error) {
      console.log("Ошибка: " + error.message);
    }
  }
}

main();

delectus aut autem
Ошибка: HTTP 404

async function main() {
  // try / catch вокруг fetch
}

main();

Сеть недоступна: TypeError

async function readData(response) {
  // ваш код
}

async function main() {
  const answers = [
    new Response(JSON.stringify({ city: "Худжанд" })),
    new Response("{}", { status: 404 }),
    new Response("<html>Привет</html>"),
    new Response("Сервис недоступен", { status: 503 }),
  ];

  for (const response of answers) {
    const result = await readData(response);
    console.log(typeof result === "string" ? result : result.city);
  }
}

main();

Худжанд
Ошибка сервера: 404
Ответ не JSON
Ошибка сервера: 503

async function loadTodo(id) {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/" + id);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return response.json();
}

async function main() {
  for (const id of [1, 99999, 2]) {
    // try / catch / finally
  }
}

main();

Загружаем #1
delectus aut autem
— готово
Загружаем #99999
Ошибка: HTTP 404
— готово
Загружаем #2
quis ut nam facilis et officia qui
— готово

05 POST, PUT, DELETE: отправляем данные

Чтобы создать или изменить запись, второй аргумент fetch — объект настроек. В нём три главных ключа: method, headers и body.

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: "Мой первый пост", body: "Салом, мир!", userId: 1 }),
  });

  const created = await response.json();

  console.log("статус:", response.status);   // 201 — Created
  console.log("id:", created.id);            // сервер присвоил номер
  console.log("заголовок:", created.title);  // и вернул то, что мы отправили
}

main();

1. method: "POST" — сообщаем серверу, что хотим создать запись.
2. Content-Type: application/json — предупреждаем: «в теле лежит JSON». Без этого сервер может не понять тело.
3. JSON.stringify(...) — тело запроса должно быть строкой, объект напрямую отправить нельзя.
4. В ответ сервер вернёт 201 Created и созданную запись — с новым id.

PUT, PATCH и DELETE

Те же настройки, другой метод. Адрес теперь указывает на конкретную запись: /posts/1.

const API = "https://jsonplaceholder.typicode.com";
const json = { "Content-Type": "application/json" };

async function main() {
  // PUT — заменить запись целиком
  let response = await fetch(API + "/posts/1", {
    method: "PUT",
    headers: json,
    body: JSON.stringify({ title: "Новый заголовок", body: "новый текст", userId: 1 }),
  });
  console.log("PUT:", response.status, (await response.json()).title);

  // PATCH — изменить только одно поле
  response = await fetch(API + "/posts/1", {
    method: "PATCH",
    headers: json,
    body: JSON.stringify({ title: "Только заголовок" }),
  });
  console.log("PATCH:", response.status, (await response.json()).title);

  // DELETE — удалить, тело не нужно
  response = await fetch(API + "/posts/1", { method: "DELETE" });
  console.log("DELETE:", response.status);
}

main();

const data = { title: "Салом" };

console.log("без stringify:", String(data));         // ✖ потеряли данные
console.log("со stringify:", JSON.stringify(data));  // ✔ корректный JSON

Читать подробнее: learn.javascript.ru — Fetch: POST-запросы · MDN — HTTP-методы

async function main() {
  // fetch с method, headers и body
}

main();

Статус: 201
id: 101

function makeOptions(method, data) {
  // ваш код
}

console.log(JSON.stringify(makeOptions("POST", { title: "Салом" })));
console.log(JSON.stringify(makeOptions("PUT", { id: 7 })));

{"method":"POST","headers":{"Content-Type":"application/json"},"body":"{\"title\":\"Салом\"}"}
{"method":"PUT","headers":{"Content-Type":"application/json"},"body":"{\"id\":7}"}

async function main() {
  // PUT-запрос
}

main();

200
Новый заголовок
1

async function main() {
  // DELETE-запрос
}

main();

200
true

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    body: { title: "Салом", body: "Первый пост", userId: 1 },
  });

  const created = await response.json();
  console.log(response.status);
  console.log(created.title);
}

main();

201
Салом

06 Собираем свою обёртку api.js

Посмотрите, сколько повторяющегося кода мы уже написали: адрес сервера, проверка ok, заголовки, JSON.stringify, response.json(). В большом проекте запросов десятки. Решение — одна функция-обёртка, которая делает всё это за вас. Это и есть ваш артефакт урока: файл api.js. Строим его по шагам, и на каждом шаге код работает.

Шаг 1. Одна функция вместо копипасты

Выносим адрес сервера в константу и учимся собирать полный адрес из пути.

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path) {
  const response = await fetch(BASE_URL + path);
  return response.json();
}

async function main() {
  const todo = await request("/todos/1");
  console.log(todo.title);
}

main();

Шаг 2. Проверка ok и ошибка со статусом

Добавляем главное: плохой статус становится ошибкой. Заодно кладём код статуса прямо в ошибку — вызывающему коду он пригодится (например, показать «Не найдено» вместо «Ошибка»).

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path) {
  const response = await fetch(BASE_URL + path);

  if (!response.ok) {
    const error = new Error("HTTP " + response.status);
    error.status = response.status;      // запоминаем код на ошибке
    throw error;
  }
  return response.json();
}

async function main() {
  try {
    await request("/todos/99999");
  } catch (error) {
    console.log(error.message, "| статус в ошибке:", error.status);
  }
}

main();

Шаг 3. Поддержка POST и других методов

Принимаем второй аргумент options. Если передали body — сами делаем JSON.stringify и ставим заголовок. Теперь тело всегда отправляется правильно.

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { method = "GET", body } = {}) {
  const options = { method, headers: {} };

  if (body !== undefined) {
    options.headers["Content-Type"] = "application/json";
    options.body = JSON.stringify(body);
  }

  const response = await fetch(BASE_URL + path, options);

  if (!response.ok) {
    const error = new Error("HTTP " + response.status);
    error.status = response.status;
    throw error;
  }
  return response.json();
}

async function main() {
  const post = await request("/posts", { method: "POST", body: { title: "Салом", userId: 1 } });
  console.log("создан пост номер", post.id);
}

main();

Запись { method = "GET", body } = {} — это деструктуризация параметра со значениями по умолчанию (урок 7). Благодаря = {} функцию можно вызывать и вовсе без второго аргумента.

Шаг 4. Таймаут: не ждём вечно

Если сервер завис, пользователь будет смотреть на «Загрузка…» до бесконечности. Поэтому добавим ограничение по времени. Для этого у fetch есть «кнопка отмены» — AbortController: вызываем controller.abort(), и запрос прерывается с ошибкой AbortError.

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { method = "GET", body, timeout = 8000 } = {}) {
  const options = { method, headers: {} };

  if (body !== undefined) {
    options.headers["Content-Type"] = "application/json";
    options.body = JSON.stringify(body);
  }

  const controller = new AbortController();
  options.signal = controller.signal;
  const timer = setTimeout(() => controller.abort(), timeout);   // через timeout мс — отмена

  try {
    const response = await fetch(BASE_URL + path, options);

    if (!response.ok) {
      const error = new Error("HTTP " + response.status);
      error.status = response.status;
      throw error;
    }
    return await response.json();
  } catch (error) {
    if (error.name === "AbortError") {
      throw new Error("сервер не ответил за " + timeout + " мс");
    }
    throw error;
  } finally {
    clearTimeout(timer);               // таймер больше не нужен
  }
}

async function main() {
  try {
    await request("/todos/1", { timeout: 1 });     // 1 мс — слишком мало
  } catch (error) {
    console.log("Ошибка:", error.message);
  }
}

main();

Шаг 5. Удобные сокращения и итоговый api.js

Остаётся спрятать вызов request за короткими именами. Объект api с методами get, post, put, del (слово delete в JS занято) — и код в проекте читается как предложение. Параметры запроса принимаем объектом и собираем через URLSearchParams.

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { method = "GET", body, timeout = 8000 } = {}) {
  const options = { method, headers: {} };

  if (body !== undefined) {
    options.headers["Content-Type"] = "application/json";
    options.body = JSON.stringify(body);
  }

  const controller = new AbortController();
  options.signal = controller.signal;
  const timer = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(BASE_URL + path, options);

    if (!response.ok) {
      const error = new Error("HTTP " + response.status);
      error.status = response.status;
      throw error;
    }
    return await response.json();
  } catch (error) {
    if (error.name === "AbortError") {
      throw new Error("сервер не ответил за " + timeout + " мс");
    }
    throw error;
  } finally {
    clearTimeout(timer);
  }
}

const api = {
  get(path, params) {
    const query = params ? "?" + new URLSearchParams(params) : "";
    return request(path + query);
  },
  post: (path, body) => request(path, { method: "POST", body }),
  put: (path, body) => request(path, { method: "PUT", body }),
  del: (path) => request(path, { method: "DELETE" }),
};

async function main() {
  const todos = await api.get("/todos", { userId: 2, _limit: 3 });
  console.log("задач:", todos.length);

  const post = await api.post("/posts", { title: "Салом", userId: 1 });
  console.log("создан пост:", post.id);

  try {
    await api.get("/todos/99999");
  } catch (error) {
    console.log("ошибка:", error.message, error.status);
  }
}

main();

Читать подробнее: learn.javascript.ru — Fetch: прерывание запроса · MDN — AbortController

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path) {
  const response = await fetch(BASE_URL + path);
  // проверка ok — здесь
  return response.json();
}

async function main() {
  const todo = await request("/todos/1");
  console.log(todo.title);

  try {
    await request("/todos/99999");
    console.log("ошибки не было");
  } catch (error) {
    console.log(error.message + ", код " + error.status);
  }
}

main();

delectus aut autem
HTTP 404, код 404

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { method = "GET", body } = {}) {
  const options = { method, headers: {} };
  if (body !== undefined) {
    options.headers["Content-Type"] = "application/json";
    options.body = JSON.stringify(body);
  }
  const response = await fetch(BASE_URL + path, options);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return response.json();
}

// const api = { get..., post... };

async function main() {
  const todo = await api.get("/todos/1");
  console.log(todo.title);

  const post = await api.post("/posts", { title: "Салом", userId: 1 });
  console.log("id нового поста:", post.id);
}

main();

delectus aut autem
id нового поста: 101

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path) {
  const response = await fetch(BASE_URL + path);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return response.json();
}

function get(path, params) {
  // соберите адрес с параметрами и вызовите request
}

async function main() {
  const todos = await get("/todos", { userId: 2, _limit: 5 });
  console.log("задач:", todos.length);
  console.log("все от пользователя 2:", todos.every((t) => t.userId === 2));

  const one = await get("/todos/1");
  console.log(one.id);
}

main();

задач: 5
все от пользователя 2: true
1

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { timeout = 8000 } = {}) {
  // создайте AbortController, таймер и передайте signal в fetch
  const response = await fetch(BASE_URL + path);
  return response.json();
}

async function main() {
  try {
    await request("/todos/1", { timeout: 1 });
    console.log("успели?!");
  } catch (error) {
    console.log(error.message);
  }

  const todo = await request("/todos/1");
  console.log(todo.title);
}

main();

Таймаут
delectus aut autem

07 ИИ-блок: обёртка над fetch от ИИ и её проверка

Обёртку над fetch ИИ пишет быстро и красиво. Но именно здесь он любит «срезать углы»: забывает проверить response.ok, не ловит ответ без JSON или не различает, что именно сломалось. Поэтому сегодняшний навык — не «получить код», а проверить его на плохих ответах: 404, 500, не-JSON и пропавшая сеть.

Как просить: плохо и хорошо

Формула промпта курса: контекст → задача → ограничения → формат ответа → проверка.

После ответа ИИ прогоните код по чек-листу. Если хотя бы один пункт «нет» — вы нашли баг:

Проверять на настоящем сервере неудобно: нельзя заставить jsonplaceholder «упасть» по заказу. Поэтому профессионалы подменяют сервер на тестовый стенд — функцию, которая отдаёт заранее заготовленные ответы. В задаче ниже именно такой стенд, и вам предстоит проверить и починить «обёртку от ИИ».

// --- тестовый стенд, не меняйте ---
function fakeFetch(scenario) {
  switch (scenario) {
    case "ok":       return Promise.resolve(new Response(JSON.stringify({ name: "Мадина" })));
    case "notfound": return Promise.resolve(new Response("{}", { status: 404 }));
    case "server":   return Promise.resolve(new Response("Internal Server Error", { status: 500 }));
    case "html":     return Promise.resolve(new Response("<html>Привет</html>"));
    case "network":  return Promise.reject(new TypeError("Failed to fetch"));
  }
}

// --- код от ИИ: починить ---
async function aiRequest(scenario) {
  const response = await fakeFetch(scenario);
  const data = await response.json();
  return data;
}

// --- проверка, не меняйте ---
async function main() {
  for (const scenario of ["ok", "notfound", "server", "html", "network"]) {
    try {
      const data = await aiRequest(scenario);
      console.log(scenario + ": данные получены: " + data.name);
    } catch (error) {
      console.log(scenario + ": Ошибка: " + error.message);
    }
  }
}

main();

ok: данные получены: Мадина
notfound: Ошибка: HTTP 404
server: Ошибка: HTTP 500
html: Ошибка: ответ не JSON
network: Ошибка: сеть недоступна

// Мой промпт:
// ...

// Что не прошло по чек-листу и как исправил:
// ...

08 Практика на уроке: первый запрос к API и вывод на страницу

Теперь соберём всё вместе: возьмём данные из публичного API, выведем в консоль, а затем нарисуем на странице. Идём шагами — после каждого шага код работает.

Шаг 1. Данные в консоли

Всегда начинайте с консоли: сначала убедитесь, что данные приходят и вы понимаете их форму, и только потом рисуйте интерфейс.

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users?_limit=3");
  const users = await response.json();

  console.log("Получили:", users.length);
  users.forEach((user) => {
    console.log(user.name + " — " + user.address.city);
  });
}

main();

Шаг 2. Рисуем на странице

Данные из fetch — это те же массивы объектов, что и в уроках 6–8. Значит, превращаем их в элементы тем же способом: createElement и append. Нажмите «▶ Запустить» и посмотрите на список справа.

<h3>Участники</h3>
<p id="status">Загрузка...</p>
<ul id="list"></ul>

body { font-family: system-ui, sans-serif; padding: 12px; }
h3 { margin: 0 0 8px; }
ul { padding-left: 20px; }
li { margin: 4px 0; }
.error { color: #c0392b; }

const status = document.querySelector("#status");
const list = document.querySelector("#list");

async function main() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users?_limit=5");
    if (!response.ok) {
      throw new Error("HTTP " + response.status);
    }
    const users = await response.json();

    users.forEach((user) => {
      const li = document.createElement("li");
      li.textContent = user.name + " (" + user.address.city + ")";
      list.append(li);
    });
    status.textContent = "Загружено: " + users.length;
  } catch (error) {
    status.className = "error";
    status.textContent = "Не получилось загрузить: " + error.message;
  }
  console.log(status.textContent);
}

main();

Обратите внимание на структуру: «Загрузка…» → данные или сообщение об ошибке. Пользователь не должен смотреть на пустую страницу и гадать, что происходит. Подробно про такие состояния поговорим в уроке 17.

<h3>Мои задачи</h3>
<ul id="todos"></ul>

body { font-family: system-ui, sans-serif; padding: 12px; }
li { list-style: none; margin: 4px 0; }

const list = document.querySelector("#todos");

async function main() {
  // 1) fetch https://jsonplaceholder.typicode.com/todos?_limit=5
  // 2) для каждой задачи создайте li: "✔ название" или "○ название"
  // 3) выведите console.log("Показано: " + list.children.length)
}

main();

Показано: 5

<p id="status">Загрузка...</p>
<h3>Пользователи</h3>
<ul id="users"></ul>
<h3>Товары</h3>
<ul id="products"></ul>

body { font-family: system-ui, sans-serif; padding: 12px; }
h3 { margin: 12px 0 4px; }
.error { color: #c0392b; }

const status = document.querySelector("#status");
const usersList = document.querySelector("#users");
const productsList = document.querySelector("#products");

async function load(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return response.json();
}

async function main() {
  try {
    // const [users, productsData] = await Promise.all([ ... ]);
    // нарисуйте оба списка: li "Имя" и li "Название — 9.99 $"
    // status.textContent = "";
    // console.log(`Пользователей: ${...}, товаров: ${...}`);
  } catch (error) {
    status.className = "error";
    status.textContent = "Ошибка: " + error.message;
  }
}

main();

Пользователей: 3, товаров: 3

09 Домашнее задание

Получить данные из двух разных API и отрисовать их на странице. Артефакт — файл api.js: ваша собственная обёртка над fetch, через которую идут оба API.

Что нужно сделать

1. Выберите два публичных API без ключа и с CORS (проверьте в браузере, что ответ приходит): jsonplaceholder.typicode.com, dummyjson.com, api.open-meteo.com (погода — задайте координаты Душанбе: latitude=38.56&longitude=68.77&current=temperature_2m), rickandmortyapi.com. Важно: сервера должны быть разные.
2. Напишите api.js. Функция request с проверкой response.ok, ошибкой со status, таймаутом, и сокращения get / post. Базовый адрес сделайте параметром (один request на два сервера).
3. Отрисуйте данные первого API — список или карточки (минимум 5 элементов, минимум 2 поля у каждого).
4. Отрисуйте данные второго API — другой формат (например, таблица, один большой блок или карточки с картинкой).
5. Три состояния для каждого блока: «Загрузка…», данные, понятная ошибка. Проверьте ошибку: измените адрес на неправильный и убедитесь, что пользователь видит сообщение, а не пустоту.
6. Одно POST-действие. Отправьте любую форму или кнопкой данные на jsonplaceholder.typicode.com/posts и покажите на странице ответ сервера (присвоенный id).
7. Проверка ИИ. Если использовали ИИ — приложите свой промпт и список ошибочных сценариев, которые вы проверили (404, сеть, не JSON).

Что сдавать

• Ссылку на репозиторий в GitHub: index.html, api.js, app.js, style.css.
• Два скриншота: страница с данными и страница с состоянием ошибки.
• Короткий README: какие два API вы выбрали и чем они отличаются.

Как оцениваем (0–10)