Базовый синтаксис

fetch()

const promise = fetch(url, [options]);Скопировать

• url— обязательный параметр, строка с адресом ресурса, к которому отправляется запрос.
• options— необязательный объект, позволяющий настроить запрос: указать HTTP-метод, заголовки, тело запроса и другие параметры.

options

fetch()

Пример GET-запроса

fetch('http://test.test') .then(response => { // Проверка успешности ответа if (!response.ok) { throw new Error(`Ошибка HTTP: ${response.status}`); } return response.json(); // Преобразование ответа в JSON }) .then(data => console.log(data)) .catch(error => console.error('Ошибка:', error));Скопировать

Дополнительные параметры

options

• method— HTTP-метод (GET, POST, PUT, DELETE и т. д.).
• headers— объект с заголовками запроса (например, можно указать тип содержимого или токен аутентификации).
• body— тело запроса. Обычно используется в запросах типа POST или PUT для отправки данных на сервер. Может быть строкой (например, в формате JSON), объектом FormData, Blob, BufferSource или URLSearchParams.

const newUser = { name: 'John Doe', email: 'redacted@example.com' }; fetch('http://test.test', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(newUser), });Скопировать

Обработка ответов

fetch()

Response

Response

• response.json()

  — преобразует ответ в JSON-объект;

• response.text()

  — получает ответ в виде текста;

• response.blob()

  — работает с бинарными данными (изображения, файлы);

• response.formData()

  — получает ответ в виде объекта FormData;

• response.arrayBuffer()

  — получает низкоуровневое представление данных.

.then()

await

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

fetch()

• Проверка статуса ответа.Можно использовать свойство

  response.ok

  , чтобы определить, был ли запрос успешным (будет

  true

  , если код статуса находится в диапазоне 200–299).dev.to
• Использование

  try/catch

  .Вызов

  fetch()

  можно обернуть в блок

  try/catch

  для обработки ошибок.dev.to
• Проверка CORS-настроек.Если запрос идёт к внешнему домену, убедитесь, что сервер разрешает его с соответствующими заголовками CORS.skillbox.rutrackjs.com

Дополнительные возможности

• Потоковая обработка данных.Можно работать с данными по мере их поступления.
• Настройка кеширования и режима CORSчерез объект

  options

  .