Как использовать Fetch API для работы с запросами на сервер

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

Основы Fetch API

Fetch API предоставляет глобальный метод fetch(), который позволяет отправлять запросы на сервер и получать обратно данные. Метод fetch() возвращает Promise, который разрешается с объектом Response.

Пример простого GET-запроса с использованием Fetch API:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

🔥 Важно помнить, что Fetch API работает с асинхронными операциями, поэтому не забывайте использовать обработку ошибок и промисы.

Работа с разными типами запросов

Fetch API поддерживает различные типы запросов, такие как GET, POST, PUT и DELETE. Давайте рассмотрим, как отправлять разные типы запросов с использованием Fetch API.

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

Чтобы отправить POST-запрос, вам нужно передать дополнительные параметры в функцию fetch():

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Отправка PUT-запроса

Отправка PUT-запроса аналогична отправке POST-запроса, но с использованием метода ‘PUT’:

fetch('https://api.example.com/data/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'updatedValue' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Отправка DELETE-запроса

Отправка DELETE-запроса не требует передачи заголовка ‘Content-Type’ или тела запроса:

fetch('https://api.example.com/data/1', {
  method: 'DELETE'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Заключение

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

Удачной разработки! 😉