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

Fetch API поддерживается во всех современных браузерах и предоставляет мощный и удобный интерфейс для работы с сетью. В этой статье мы рассмотрим, как использовать fetch() для отправки запросов и обработки ответов.

Основы fetch

Fetch - это функция, которая принимает URL ресурса, который вы хотите получить, и возвращает Promise, который разрешается, когда ответ получен. Обычно вы будете использовать fetch() для получения JSON-данных, изображений, HTML-файлов и других ресурсов.

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

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

В этом примере мы отправляем GET-запрос по URL-адресу https://jsonplaceholder.typicode.com/posts/1, который возвращает JSON-объект. Мы вызываем метод json() для извлечения данных из ответа и обрабатываем результаты в следующем блоке, используя методы then() и catch().

Заголовки запросов fetch

Fetch позволяет добавлять заголовки к запросу, которые определяют, как сервер должен обработать запрос. Например, вы можете указать заголовок Content-Type, чтобы определить тип данных, которые вы отправляете на сервер, или заголовок Authorization, чтобы предоставить доступ к защищенным ресурсам.

Пример использования fetch с заголовками:

fetch('https://example.com/data', {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

В этом примере мы добавляем заголовки к запросу, передавая объект options со свойством headers. Мы указываем тип данных, отправляемых на сервер, и передаем токен авторизации.

Методы HTTP-запросов в fetch()

Fetch поддерживает все методы HTTP-запросов: GET, POST, PUT, DELETE и другие. По умолчанию fetch() использует метод GET, но вы можете изменить это, передав метод в объект options.

GET-запрос

GET-запрос используется для получения данных с сервера. Он не изменяет данные на сервере и не имеет побочных эффектов.

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

POST-запрос

POST-запрос используется для отправки данных на сервер. Он может изменять данные на сервере и имеет побочные эффекты.

const post = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

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

PUT-запрос

PUT-запрос используется для обновления данных на сервере.

const post = {
  id: 1,
  title: 'foo',
  body: 'bar',
  userId: 1
};

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

DELETE-запрос

DELETE-запрос используется для удаления данных на сервере.

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE'
})
  .then(response => console.log(response))
  .catch(error => console.error(error));

Кроме основных методов HTTP-запросов GET, POST, PUT и DELETE, с помощью функции fetch() также можно отправлять запросы с использованием других HTTP-методов, таких как OPTIONS, HEAD, PATCH и других. Для этого нужно указать необходимый метод в настройках объекта init.

HTTP-метод OPTIONS

Метод OPTIONS используется для запроса информации о возможностях сервера или параметрах соединения. Например, можно отправить запрос, чтобы узнать, какие методы и заголовки поддерживает сервер для данного ресурса.

Пример запроса OPTIONS:

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

HTTP-метод HEAD

Метод HEAD используется для запроса только заголовков ответа, без тела ответа. Например, можно отправить запрос, чтобы узнать, какие заголовки возвращаются сервером для данного ресурса.

Пример запроса HEAD:

fetch('https://example.com/api', {
  method: 'HEAD'
})
.then(response => {
  console.log(response.headers.get('content-type'))
})
.catch(error => console.error(error))

HTTP-метод PATCH

Метод PATCH используется для частичного обновления ресурса на сервере. Например, можно отправить запрос, чтобы изменить только одно поле объекта, не обновляя остальные поля.

Пример запроса PATCH:

fetch('https://example.com/api/users/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

Другие методы

Кроме указанных выше методов, с помощью функции fetch() также можно отправлять запросы с использованием других HTTP-методов, таких как CONNECT, TRACE, MOVE и др. Для этого нужно указать необходимый метод в настройках объекта init.

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

Однако, не все серверы поддерживают эти методы, поэтому перед их использованием необходимо проверить документацию API или связаться с разработчиками сервера.

Обработка ошибок при использовании fetch

При использовании fetch() может возникнуть ряд ошибок, связанных с сетью, сервером и другими факторами. Например, сервер может вернуть ошибку в ответ на запрос или сетевое соединение может быть прервано. Чтобы обрабатывать такие ошибки, мы можем использовать метод catch().

Вот пример использования метода catch() при выполнении запроса:

fetch('https://example.com/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

В этом примере мы добавили обработку ошибок с помощью метода catch(). Если при выполнении запроса произойдет ошибка, мы выведем сообщение об ошибке в консоль.

Заключение

Функция fetch() - это удобный способ отправки HTTP-запросов в JavaScript. Она позволяет получать данные с сервера и отправлять данные на сервер, используя различные методы HTTP-запросов. Кроме того, функция fetch() позволяет устанавливать различные параметры запроса, такие как заголовки, методы, тело запроса и т.д.