Fetch API в JavaScript

Fetch API предоставляет современный способ отправки и получения данных с сервера в веб-приложениях. Он предоставляет более простой и гибкий способ взаимодействия с веб-серверами с использованием обещаний (Promises). Вот основы работы с Fetch API:

Отправка GET-запроса:

Для отправки GET-запроса с Fetch API, вы используете функцию fetch(). Эта функция возвращает промис, который разрешается в объект Response после получения ответа от сервера. Вы можете использовать метод .then() для обработки ответа.

fetch('https://example.com/api/data')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Ошибка сети или сервера');
    }
    return response.json(); // Преобразование ответа в JSON
  })
  .then((data) => {
    console.log(data); // Обработка данных
  })
  .catch((error) => {
    console.error(error);
  });

Отправка POST-запроса:

Для отправки POST-запроса с Fetch API, вы можете указать дополнительные параметры в объекте init, такие как метод method, заголовки headers и тело запроса body. Пример отправки данных в формате JSON:

const data = { username: 'user123', password: 'pass456' };

fetch('https://example.com/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then((response) => {
    if (!response.ok) {
      throw new Error('Ошибка сети или сервера');
    }
    return response.json();
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

Обработка заголовков:

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

fetch('https://example.com/api/data')
  .then((response) => {
    console.log(response.status); // Код статуса ответа
    console.log(response.headers.get('Content-Type')); // Заголовок Content-Type
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

Fetch API позволяет вам создавать разнообразные запросы, включая заголовки, параметры и тело запроса. Он также обрабатывает статусы ответов и упрощает обработку полученных данных. Это современный и мощный инструмент для работы с HTTP-запросами в веб-приложениях.