Как сделать HTTP-запрос с помощью Fetch API?

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

Основы использования Fetch API

1. Выполнение GET-запроса

С помощью Fetch API выполнять GET-запросы довольно просто. Рассмотрим следующий пример, в котором мы получаем данные с публичного API (например, JSONPlaceholder):

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    // Проверяем, что ответ успешный (status 200-299)
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json(); // Преобразуем ответ в JSON
  })
  .then(data => {
    console.log(data); // Здесь работают с полученными данными
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

2. Выполнение POST-запроса

Для отправки данных на сервер можно использовать POST-запросы. Ниже приведен пример, как это сделать:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // Указываем метод запроса
  headers: {
    'Content-Type': 'application/json' // Указываем тип содержимого
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }) // Данные, которые мы отправляем на сервер
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json(); // Преобразуем ответ в JSON
  })
  .then(data => {
    console.log('Success:', data); // Успешно обработанные данные
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

3. Обработка ошибок

Как видно из примеров, важно обрабатывать ошибки при работе с Fetch API. Ошибки могут произойти не только из-за проблем с сетью, но и тогда, когда сервер возвращает статус ошибок (например, 404 или 500).

4. Запросы с параметрами

Иногда бывает нужно выполнять запросы с определенными параметрами. Например, можем передать параметры в URL:

const userId = 1;
fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Заключение

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