Введение
Fetch API представляет собой серьезную эволюцию того, как веб-приложения взаимодействуют с серверами и получают контент по сети. Представленный как современная альтернатива XMLHttpRequest (XHR), API Fetch предлагает больше возможностей, гибкости и простоты для разработчиков. Благодаря интеграции в современные браузеры Fetch стал важнейшим инструментом в создании современных веб-приложений, обеспечивающим более естественную и эффективную обработку асинхронных операций.

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

По своей сути Fetch построен на основе функции fetch() — глобальной функции, доступной в современных браузерах и отправляющей сетевой запрос. Эта функция возвращает Promise, который преобразуется в объект Response, предоставляя разработчикам легкий доступ к данным ответа, заголовкам и статусу. Это обеспечивает более интуитивный и организованный подход к обработке результатов сетевых запросов. (Читать далее)

Основной синтаксис
API Fetch основан на функции fetch(), которая одновременно проста и мощна. Функция используется для инициации сетевых запросов и имеет два основных аргумента:

• URL: строка URL-адреса ресурса, который вы хотите получить.
• Параметры (необязательно): объект, содержащий различные настройки или конфигурации запроса, такие как метод HTTP, заголовки, содержимое тела и режим.

Структура простого вызова выборки
Базовый вызов выборки прост и выглядит следующим образом:

fetch(url)
  .then(response => {
    // Handle the response here
  })
  .catch(error => {
    // Handle any errors here
  });

• url — это адрес ресурса, который нужно получить.
• Метод then() обрабатывает обещание, разрешенное Fetch API, предоставляя объект Response.
• Метод catch() устраняет любые ошибки, которые могут возникнуть во время запроса.

Пример базового запроса на выборку

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

В этом примере показано, как выполняется простой запрос Fetch, при этом ответ в случае успеха регистрируется на консоли, а ошибки корректно обрабатываются.

Зачем использовать Fetch?

Преимущества использования Fetch

Обещания: Одним из наиболее значительных преимуществ Fetch является использование обещаний. Промисы обеспечивают более чистый и управляемый способ решения асинхронных задач по сравнению с подходом XHR, основанным на обратных вызовах. С помощью Promises вы можете объединить методы .then() для обработки успешных ответов и методы .catch() для управления ошибками, в результате чего код становится более читабельным и его легче отлаживать.

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

Кроме того, Fetch API прекрасно сочетается с синтаксисом async/await, что делает асинхронный код еще более простым.

Пример использования async/await:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

Чистый синтаксис: Fetch предлагает современный и менее подробный синтаксис по сравнению с XHR. Объект конфигурации, передаваемый в fetch(), упрощает установку параметров запроса, таких как метод HTTP, заголовки и содержимое тела, что приводит к более чистому и удобному в обслуживании коду. (Читать статью полностью

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:', error));

Обработка потока: Fetch поддерживает потоковую передачу ответов, что позволяет разработчикам более эффективно обрабатывать большие объемы данных. В то время как XHR может иметь проблемы с большими ответами, что приводит к проблемам с производительностью или требует дополнительной обработки для обработки порциями, объект Response Fetch предоставляет такие методы, как .body.getReader(), для чтения данных порциями. Это особенно полезно для потоковой передачи и управления большими наборами данных.

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    let decoder = new TextDecoder();
    let result = '';

    return reader.read().then(function processText({ done, value }) {
      if (done) {
        console.log('Stream finished.');
        return result;
      }
      result  = decoder.decode(value, { stream: true });
      return reader.read().then(processText);
    });
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Читать статью полностью — нажмите здесь

Заключение
Fetch API произвел революцию в том, как разработчики выполняют сетевые запросы в веб-приложениях. Благодаря более чистому синтаксису, полной интеграции с Promises и поддержке современных функций, таких как асинхронность/ожидание и потоковая передача, Fetch предлагает мощный и гибкий инструмент для обработки HTTP-запросов. Поскольку веб-разработка продолжает развиваться, Fetch API останется важнейшим компонентом в создании эффективных, удобных в обслуживании и современных веб-приложений.