fetch и работа с JSON

fetch и JSON в JavaScript: как делать HTTP-запросы, разбирать ответ сервера и обрабатывать ошибки — базовый набор для работы с API.

fetch — встроенная в браузер функция для HTTP-запросов. Она возвращает промис с объектом Response. Сервер чаще всего отвечает JSON, который нужно разобрать методом .json().

Простой GET-запрос

В реальном браузере код ниже сделает запрос к API и выведет данные. В учебном трассировщике сеть недоступна — примеры иллюстративные.

// GET-запрос с async/await
async function getPost() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await response.json(); // разбираем тело как JSON
  console.log(post.title);
}

getPost();

Вывод (в браузере):

sunt aut facere repellat provident occaecati excepturi optio reprehenderit

Проверка статуса ответа

fetch считает ошибкой только сетевые сбои, но не HTTP-ошибки (404, 500). Статус нужно проверять вручную через response.ok или response.status.

async function safeGet(url) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP ошибка: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (err) {
    console.log('Ошибка запроса:', err.message);
    return null;
  }
}

// использование
safeGet('https://jsonplaceholder.typicode.com/posts/1')
  .then(data => console.log(data?.id));

POST-запрос с JSON-телом

Чтобы отправить данные на сервер, передают объект настроек: метод, заголовки и тело — сериализованное через JSON.stringify.

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 }),
  });

  const newPost = await response.json();
  console.log('Создан пост с ID:', newPost.id);
}

createPost('Заголовок', 'Текст поста');

JSON.parse и JSON.stringify

Эти методы удобны и вне fetch — для преобразования данных:

const obj = { name: 'Аня', scores: [90, 85, 100] };

// объект → строка JSON
const json = JSON.stringify(obj);
console.log(json);
// {"name":"Аня","scores":[90,85,100]}

// строка JSON → объект
const parsed = JSON.parse(json);
console.log(parsed.name);       // Аня
console.log(parsed.scores[0]);  // 90

Вывод:

{"name":"Аня","scores":[90,85,100]}
Аня
90

Никогда не используйте eval для разбора JSON — это дыра в безопасности. Всегда используйте JSON.parse.

Коротко

fetch(url) возвращает промис с Response; для чтения тела вызывают .json() или .text().
response.ok — удобная проверка, что статус в диапазоне 200–299.
POST-запросы требуют method, headers и тело через JSON.stringify.
JSON.stringify и JSON.parse переводят объект в строку и обратно.