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

1. Простой пример получения:
   Самая простая форма запроса на получение включает предоставление URL-адреса ресурса, который вы хотите получить. Вот пример:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // Process the fetched data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors
    console.error('Error:', error);
  });

2. Извлечение с настраиваемыми заголовками.
   Вы можете включить настраиваемые заголовки в свой запрос на получение, передав объект в качестве второго аргумента. Это полезно для добавления токенов аутентификации или указания типов контента. Вот пример:

fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    // Process the fetched data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors
    console.error('Error:', error);
  });

3. Извлечение с помощью различных методов HTTP.
   По умолчанию Fetch использует метод GET, но вы можете указать другие методы HTTP, такие как POST, PUT, DELETE и т. д., используя свойство метода. Вот пример выполнения POST-запроса:

fetch('https://api.example.com/data', {
  method: 'POST',
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => {
    // Process the fetched data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors
    console.error('Error:', error);
  });

4. Извлечение с параметрами запроса.
   Чтобы включить параметры запроса в URL-адрес, вы можете использовать интерфейс URLSearchParams. Он позволяет вам создавать и манипулировать строкой запроса URL-адреса. Вот пример:

const params = new URLSearchParams({ search: 'keyword' });
fetch(`https://api.example.com/data?${params}`)
  .then(response => response.json())
  .then(data => {
    // Process the fetched data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors
    console.error('Error:', error);
  });

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