Fetch — это мощный инструмент в JavaScript, который помогает взаимодействовать с сервером и получать/отправлять данные. Он заменяет старый XMLHttpRequest и предлагает удобный способ работы с сетевыми запросами.

Простой пример

Представьте, что вы хотите заказать пиццу с доставкой. Для этого вам нужно отправить запрос на пиццерию, указав свой адрес и выбрав пиццу из меню. Fetch будет соответствовать этому запросу в контексте JavaScript.

1. Создание Fetch-запроса: Это аналогично тому, как вы звоните в пиццерию и делаете заказ. Вы набираете номер пиццерии и говорите свой заказ по телефону.
2. Ожидание ответа: После размещения заказа, вы ждете ответа от пиццерии. В случае успешного заказа, они готовят и доставляют вам пиццу.
3. Обработка ответа: После получения пиццы, вы распаковываете посылку и приступаете к еде. Это аналогично обработке ответа Fetch-запроса в JavaScript. Вы извлекаете данные из ответа, например, в формате JSON, и работаете с ними дальше в своем коде.
4. Обработка ошибок: Если пиццерия не может принять ваш заказ или у вас возникли проблемы с доставкой, они сообщают вам об этом. В случае с Fetch, если запрос не прошел успешно или возникли ошибки, вы можете обработать их и принять соответствующие меры.

Таким образом, Fetch в JavaScript работает подобно процессу заказа пиццы. Он позволяет вам отправлять запросы на сервер, получать данные в ответ и обрабатывать их в своем коде.

Создание запроса и обработка ответа

Чтобы создать Fetch-запрос, нужно вызвать функцию fetch() и передать ей URL-адрес ресурса, к которому хотите обратиться. Например:

fetch('https://api.example.com/data')
  .then(response => {
    // Обработка ответа
  })
  .catch(error => {
    // Обработка ошибки
  });

А как обработать результаты Fetch-запроса? Просто используйте метод .then() после вызова fetch(). Внутри этого метода вы получите объект response, с которым можно работать дальше. Например, можно извлечь данные из ответа в формате JSON или текста:

fetch('https://api.example.com/data')
  .then(response => response.json()) // Преобразование в JSON
  .then(data => {
    // Работа с данными
  })
  .catch(error => {
    // Обработка ошибки
  });

Общая структура Fetch

Fetch-запрос в общем виде выглядит следующим образом:

fetch(url, options)

• url — URL-адрес ресурса, к которому отправляется запрос.
• options (необязательно) — объект с опциями запроса, такими как метод, заголовки, тело запроса и другие.

Примеры опций, которые могут быть использованы в объекте options:

• method — метод запроса, такой как ‘GET’, ‘POST’, ‘PUT’, ‘DELETE’ и т.д.
• headers — объект с заголовками запроса.
• body — данные, которые будут отправлены в теле запроса (например, JSON, FormData).
• mode — режим запроса, например, ‘cors’, ‘no-cors’, ‘same-origin’.
• credentials — режим отправки куки, например, ‘same-origin’, ‘include’, ‘omit’.
• cache — режим кеширования запроса, например, ‘default’, ‘no-store’, ‘reload’, ‘force-cache’.

Пример получения данных пользователя

Вот пример отправки запроса на сервер для получения данных пользователя по его ID и обработки результата с помощью Fetch. В этом примере данные пользователя (ID) будут переданы в теле запроса (body) в формате JSON.

const userId = 123; // ID пользователя

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ id: userId })
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Ошибка загрузки данных: ' + response.status);
    }
  })
  .then(data => {
    // Обработка полученных данных пользователя
    console.log('Данные пользователя:', data);
  })
  .catch(error => {
    console.log('Ошибка:', error);
  });

В этом примере:

1. Отправляем POST-запрос на URL-адрес https://api.example.com/users, передавая в теле запроса (body) JSON-объект с ID пользователя.
2. В заголовках (headers) указываем, что содержимое запроса является JSON.
3. Затем мы обрабатываем полученный ответ, проверяем успешность запроса (response.ok), преобразуем ответ в формат JSON (response.json()).
4. Далее обрабатываем полученные данные пользователя.
5. Если возникнет ошибка, мы ее перехватываем и выводим сообщение об ошибке.