Руководство по использованию Fetch API для выполнения HTTP-запросов в JavaScript

Чтобы использовать Fetch API, выполните следующие действия:

  1. Создание запроса на получение.
    Чтобы инициировать запрос, вам необходимо создать новый объект Requestи передать URL-адрес ресурса, который вы хотите получить. Вы также можете указать дополнительные параметры, такие как метод запроса, заголовки, тело и т. д.

    const request = new Request(url, options);
  2. Отправка запроса.
    После того как вы создали объект запроса, вы можете отправить его с помощью функции fetch(). Эта функция возвращает обещание, которое преобразуется в объект Response, представляющий ответ на запрос.

    fetch(request)
     .then(response => {
       // Handle the response
     })
     .catch(error => {
       // Handle any errors
     });
  3. Обработка ответа.
    Объект Responseпредоставляет несколько методов для доступа к данным ответа. Некоторые часто используемые методы включают в себя:

    • response.json(): анализирует тело ответа как JSON и возвращает обещание, которое преобразуется в проанализированные данные.
    • response.text(): возвращает обещание, которое преобразуется в тело ответа в виде текста.
    • response.blob(): возвращает обещание, которое преобразуется в тело ответа как объект Blob.
    • response.arrayBuffer(): возвращает обещание, которое преобразуется в тело ответа как ArrayBuffer.
    fetch(request)
     .then(response => response.json())
     .then(data => {
       // Handle the parsed data
     })
     .catch(error => {
       // Handle any errors
     });
  4. Обработка ошибок.
    В случае сетевых ошибок или неудачных запросов будет выполнен блок catch(). Вы можете обрабатывать ошибки и выполнять соответствующие действия, например отображать пользователю сообщение об ошибке.