fetch: запросы к серверу

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

fetch(url) отправляет запрос и возвращает промис. Промис выполняется не тогда, когда пришли данные, а тогда, когда пришли заголовки ответа — то есть сервер уже сказал «понял, отвечаю». Само тело ответа читается отдельно, и это второй промис. Отсюда два await подряд — самая узнаваемая деталь работы с fetch.

js

async function loadTodo() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const todo = await response.json();
  console.log(todo.title);
}
loadTodo();

Сначала предположите, что выведет код

Объект response — это не данные, а сам ответ: код состояния, заголовки и обещание тела. Данные достаются методами, и метод выбирается по формату: json() для JSON, text() для HTML, CSV или просто строки.

Что пишем	Что получаем
response.status	числовой код ответа: 200, 404, 500
response.ok	true, если код в диапазоне 200–299
response.headers.get("content-type")	значение заголовка ответа
await response.json()	тело, разобранное из JSON в объект
await response.text()	тело целиком как строка

Тело ответа — поток: браузер отдаёт его по кусочкам и не хранит копию. Как только поток вычитан, повторно взять его неоткуда, и второй вызов json() завершится ошибкой. Если тело нужно в двух местах — сохраните результат в переменную или сделайте response.clone() до чтения.

js

async function twice() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  await response.json();
  await response.json();
}
twice().catch((error) => console.log(error.name));

Сначала предположите, что выведет код

Главная ловушка новичка: fetch не отвергает промис из-за плохого кода ответа. С точки зрения браузера всё прошло отлично — запрос ушёл, ответ вернулся. То, что в ответе написано «нет такой страницы», это уже смысл, а не техника.

js

async function check() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/99999");
  console.log(response.ok);
  console.log(response.status);
}
check();

Сначала предположите, что выведет код

404 и 500 — это успешно доставленные ответы «нет» и «мне плохо». fetch считает свою работу сделанной; понять, что ответ негодный, обязаны вы.

Поэтому проверка response.ok — обязательная строчка, а не хороший тон. Удобно спрятать её в маленькую обёртку и дальше пользоваться только ею: тогда провал сервера превращается в обычную ошибку промиса, которую ловит catch.

js

async function getJSON(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error("HTTP " + response.status);
  return response.json();
}
getJSON("https://jsonplaceholder.typicode.com/todos/99999")
  .catch((error) => console.log(error.message));

Сначала предположите, что выведет код

Второй аргумент fetch — объект настроек. Для отправки данных нужны три поля: method, headers с типом содержимого и body — уже готовая строка. Объект в body положить нельзя, его превращает в строку JSON.stringify.

js

async function createPost() {
  const body = JSON.stringify({ title: "Привет", userId: 1 });
  const headers = { "Content-Type": "application/json" };
  const r = await fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", headers, body });
  console.log(r.status, (await r.json()).id);
}
createPost();

Сначала предположите, что выведет код

Ответ на POST читается ровно так же, как на GET: сначала response, потом тело. Код 201 означает «создано» — и он тоже попадает в response.ok, потому что лежит в диапазоне 200–299.

В body можно положить строку, URLSearchParams, Blob или FormData. Последнее — для форм и файлов: FormData хранит список пар «имя — значение», его собирают из формы или заполняют методом append, а файлы в нём едут байтами. Такое тело уходит частями, разделёнными случайной служебной строкой, и заголовок Content-Type вместе с этой строкой браузер подставляет сам. Если написать заголовок вручную, разделителя в нём не окажется и сервер не разберёт тело. Подробно — в статье «FormData и отправка на сервер» в части II.

js

const form = new FormData();
form.append("name", "Рико");
console.log(form.get("name"));
// дальше: fetch(url, { method: "POST", body: form }) — без headers

Сначала предположите, что выведет код

Промис fetch отвергается только тогда, когда запрос вообще не состоялся: нет интернета, домен не разрешился, сервер разорвал соединение или ответ запретил CORS. Ошибка приходит с именем TypeError, а текст сообщения у каждого браузера свой — опираться на него не стоит. Отменённый запрос тоже попадает в catch, но у его ошибки своё имя — о нём в конце статьи.

js

async function ping() {
  try {
    await fetch("https://this-domain-does-not-exist.invalid/data");
  } catch (error) {
    console.log(error.name);
  }
}
ping();

Сначала предположите, что выведет код

Рабочий шаблон складывается из двух проверок: try/catch вокруг запроса ловит проблемы сети, а response.ok — проблемы смысла. Пропустите любую из них — и приложение однажды покажет пользователю undefined вместо данных.

js

async function loadTitle(id) {
  try {
    const r = await fetch("https://jsonplaceholder.typicode.com/todos/" + id);
    if (!r.ok) return "нет данных: " + r.status;
    return (await r.json()).title;
  } catch { return "сеть недоступна"; }
}
loadTitle(2).then(console.log);

Сначала предположите, что выведет код

Запрос иногда становится не нужен: пользователь ушёл со страницы или успел напечатать в поиске новую букву. Отменяют запрос через AbortController: у контроллера есть signal, который передают в настройки fetch, и метод abort(). После отмены промис отвергается ошибкой с именем AbortError.

js

const controller = new AbortController();
fetch("https://jsonplaceholder.typicode.com/todos/1", { signal: controller.signal })
  .then(() => console.log("успели"))
  .catch((error) => console.log(error.name));
controller.abort();

Сначала предположите, что выведет код

Для самого частого случая — «ждём не дольше N миллисекунд» — контроллер писать не обязательно: есть готовый AbortSignal.timeout(ms). По истечении срока запрос обрывается ошибкой TimeoutError. Какая из веток сработает в примере ниже, зависит от скорости сети — это честно непредсказуемо.

js

async function load() {
  try {
    const r = await fetch("https://jsonplaceholder.typicode.com/todos/1", { signal: AbortSignal.timeout(3000) });
    console.log(r.ok);
  } catch (error) { console.log(error.name); }
}
load();

Сначала предположите, что выведет код

У любого чужого API вы столкнётесь с тремя вещами. Первая — параметры запроса. Склеивать их руками через ? и & опасно: пробелы и кириллица ломают адрес. Пусть этим займётся URL — fetch принимает такой объект напрямую.

js

async function loadComments() {
  const url = new URL("https://jsonplaceholder.typicode.com/comments");
  url.searchParams.set("postId", "1");
  const response = await fetch(url);
  const comments = await response.json();
  console.log(comments.length);
}
loadComments();

Сначала предположите, что выведет код

Вторая вещь — ключ доступа: обычно он передаётся заголовком Authorization со значением вида Bearer ваш-токен. Третья — CORS: если чужой сервер не разрешил вашему адресу читать ответ, запрос упадёт в catch, а в консоли появится длинное объяснение про cross-origin. Это не чинится со стороны фронтенда — только настройками сервера или собственным прокси.

fetch возвращает промис с объектом Response: первый await — заголовки, второй (json или text) — тело.
Коды 404 и 500 не отвергают промис. Проверка response.ok обязательна в каждом запросе.
POST собирается из method, headers с Content-Type и body — строки из JSON.stringify.
В catch попадает только несостоявшийся запрос: нет сети, не разрешился домен, CORS или отмена.
AbortController и его signal прерывают запрос ошибкой AbortError; для таймаута хватит AbortSignal.timeout(ms).

1/3Сервер ответил кодом 404. Что произойдёт с промисом от fetch?

2/3Зачем при работе с JSON нужны два await подряд?

3/3Что делает controller.abort() для уже запущенного fetch?

Обёртка getJSON с проверкой ответа

Напишите функцию getJSON(url), которая делает запрос, возвращает разобранный JSON при удачном ответе и бросает Error с текстом вида HTTP 404, если response.ok оказался ложным. Проверьте её на двух адресах — существующем и несуществующем.

js

async function getJSON(url) {
  // ваш код
  return {};
}

getJSON("https://jsonplaceholder.typicode.com/todos/1")
  .then((todo) => console.log(todo.title)); // сейчас undefined, а нужно "delectus aut autem"
getJSON("https://jsonplaceholder.typicode.com/todos/99999")
  .catch((error) => console.log(error.message)); // сейчас пусто, а нужно "HTTP 404"

Сначала предположите, что выведет код

Вся хитрость в одной строчке с if: без неё функция вернёт разобранное тело страницы ошибки и притворится, что всё хорошо.

jsлистинг · не запускается

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

getJSON("https://jsonplaceholder.typicode.com/todos/1")
  .then((todo) => console.log(todo.title)); // "delectus aut autem"

getJSON("https://jsonplaceholder.typicode.com/todos/99999")
  .catch((error) => console.log(error.message)); // "HTTP 404"

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

getJSON("https://jsonplaceholder.typicode.com/todos/1")
  .then((todo) => console.log(todo.title)); // "delectus aut autem"

getJSON("https://jsonplaceholder.typicode.com/todos/99999")
  .catch((error) => console.log(error.message)); // "HTTP 404"

Возвращать response.json() без await можно: async-функция сама дождётся вложенного промиса.

Загрузка с таймаутом

Напишите loadWithTimeout(url, ms): запрос отменяется, если сервер не ответил за ms миллисекунд. Используйте AbortController и setTimeout, а таймер обязательно погасите clearTimeout, когда ответ пришёл вовремя — иначе он выстрелит в пустоту.

Блок finally выполняется и при успехе, и при ошибке — идеальное место для уборки таймера.

jsлистинг · не запускается

async function loadWithTimeout(url, ms) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), ms);
  try {
    const response = await fetch(url, { signal: controller.signal });
    if (!response.ok) throw new Error("HTTP " + response.status);
    return await response.json();
  } finally {
    clearTimeout(timer);
  }
}

loadWithTimeout("https://jsonplaceholder.typicode.com/todos/1", 3000)
  .then((todo) => console.log(todo.title))   // "delectus aut autem"
  .catch((error) => console.log(error.name)); // "AbortError" при таймауте

async function loadWithTimeout(url, ms) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), ms);
  try {
    const response = await fetch(url, { signal: controller.signal });
    if (!response.ok) throw new Error("HTTP " + response.status);
    return await response.json();
  } finally {
    clearTimeout(timer);
  }
}

loadWithTimeout("https://jsonplaceholder.typicode.com/todos/1", 3000)
  .then((todo) => console.log(todo.title))   // "delectus aut autem"
  .catch((error) => console.log(error.name)); // "AbortError" при таймауте

Обратите внимание на return await: без await функция вышла бы из try раньше, чем тело дочитано, и таймер снялся бы слишком рано. Почти то же в одну строку даёт готовый AbortSignal.timeout(ms) — только имя ошибки у него своё, TimeoutError.

fetch: запросы к серверу

Видеоразбор темы за 5–7 минут

Первый запросfetch, Response и два await

404 — не ошибкапочему fetch молчит про 404

POST: отправляем данныеметод, заголовки и тело

Когда fetch всё-таки падаетсеть, CORS и try/catch

AbortControllerкак отменить запрос на лету

Дальше — настоящее APIпараметры, ключи и CORS

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Обёртка getJSON с проверкой ответа

Загрузка с таймаутом