run-dev

fetch в JavaScript: примеры работы с запросами в JS

fetch — это встроенная в браузеры функция для выполнения HTTP-запросов. Она возвращает промис, который разрешается в объект Response, содержащий информацию о результате запроса, включая статус и тело ответа.

fetch пришел на замену устаревшему XMLHttpRequest, предложив более удобный и лаконичный API для работы с сетевыми запросами.

Выполнение GET-запроса с помощью fetch

GET-запрос — самый простой способ получить данные с сервера:

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));

Функция fetch принимает URL и возвращает промис. Метод json() разбирает тело ответа в формате JSON и тоже возвращает промис.

Отправка данных с помощью POST-запроса

POST-запрос используется для отправки данных на сервер. В fetch передается объект с настройками запроса:

fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 })
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));

В данном примере:

  • method указывает тип запроса.
  • headers содержит заголовки, в том числе Content-Type, который сообщает серверу формат данных.
  • body содержит данные, отправляемые на сервер.

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

fetch не отклоняет промис при получении ответа с ошибочным статусом (например, 404 или 500). Для проверки успешности запроса используется свойство response.ok:

fetch('https://jsonplaceholder.typicode.com/posts/999')
    .then(response => {
        if (!response.ok) {
            throw new Error(`Ошибка HTTP: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));

Асинхронный fetch с использованием async/await

fetch удобно использовать в асинхронных функциях для получения более чистого кода:

async function fetchData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!response.ok) {
            throw new Error(`Ошибка HTTP: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Ошибка:', error);
    }
}

Передача параметров в URL

При выполнении GET-запроса параметры можно передавать прямо в строке запроса:

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

Отправка данных в виде FormData

При отправке файлов или формы часто используется FormData:

const formData = new FormData();
formData.append('name', 'John');
formData.append('file', fileInput.files[0]);

fetch('/upload', {
      method: 'POST',
      body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data));

При использовании FormData заголовок Content-Type устанавливается автоматически.

Обработка потоков данных (stream)

Объект Response поддерживает работу с потоками через метод body, что позволяет обрабатывать данные по мере их получения:

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
        const reader = response.body.getReader();
        return reader.read().then(function processText({ done, value }) {
            if (done) return;
            console.log(new TextDecoder().decode(value));
            return reader.read().then(processText);
        });
    });

fetch в JavaScript — это универсальный и удобный инструмент для выполнения сетевых запросов. Он поддерживает работу с промисами, хорошо интегрируется с async/await и покрывает большинство задач по взаимодействию с сервером в веб-приложениях. Его использование стало стандартом в современных браузерных скриптах.

Больше записей