fetch — получение данных с сервера

Что такое fetch: это встроенная функция в JavaScript, с помощью которой можно отправлять запросы на сервер (например, чтобы получить данные или отправить форму) без перезагрузки страницы.

Где применяется: в современных сайтах и приложениях почти все динамичные данные (новости, погода, товары, комментарии) загружаются с помощью fetch. Это делает сайты быстрыми и интерактивными.

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

Простой пример: получаем данные о пользователе

Попробуем отправить запрос на сервер и вывести результат на страницу. Используем тестовый API https://jsonplaceholder.typicode.com/users/1.

HTML:

<button id="loadUser">Загрузить пользователя</button>
<div id="userInfo"></div>

JavaScript:

document.getElementById("loadUser").addEventListener("click", async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const user = await response.json();

  document.getElementById("userInfo").innerHTML =
    `<p><strong>Имя:</strong> ${user.name}</p>
     <p><strong>Email:</strong> ${user.email}</p>
     <p><strong>Город:</strong> ${user.city}</p>`;
});

Попробуйте прямо здесь:

Пример: имитируем получение данных пользователя с сервера.

Совет: перед тем как работать с реальным сервером, отладь работу с fetch на тестовых API — это безопаснее и быстрее.

Что дальше

В следующем уроке мы поговорим о try...catch и отладке в консоли — это поможет тебе находить и исправлять ошибки.

К содержанию курса

fetch: получение данных с сервера