Недавно я выполнил задачу по коду, в которой меня попросили сделать HTTP-запрос GET к API. Сначала я подумал: «ОТЛИЧНО, я сделал достаточно этого, чтобы узнать, как использовать Fetch, а затем обрабатывать возвращенное обещание».

Однако при написании кода я продолжал получать ReferenceError; выборка не определена. Это было крайне неприятно, если не сказать больше. Проведя небольшое исследование, я понял, что это потому, что Fetch API не реализован в Node.js, где и выполнялась задача кода.

Простым решением было бы запустить npm install node-fetch - save как внешний модуль, но я не использовал CLI в этой задаче кода, поэтому мне пришлось исследовать другой способ выполнения вызовов API. Введите: XMLHttpRequest.

Что такое XMLHttpRequest?

XMLHttpRequest (XHR) - это объекты, которые используются для взаимодействия с серверами. Он извлекает данные из URL-адреса без необходимости полного обновления страницы и позволяет обновлять только часть страницы. Это основа программирования AJAX (асинхронный JavaScript и XML), который постепенно полностью заменяется Fetch API.

Как вы это реализуете?

  1. Сначала необходимо инициализировать объект XHR.

2. Нам нужно определить прослушиватель событий для обработки случаев успеха и ошибок.

3. Затем необходимо выполнить вызов XHR.open («Тип запроса HTTP», URL, [необязательный синхронный аргумент]) для инициализации запроса, а затем отправить его с помощью XHR.send ().

Важные моменты, на которые следует обратить внимание:

  • Слушатели событий для обработки случаев успеха и ошибок должны быть определены ДО вызова .open.
  • По умолчанию ответ получается в виде строки, и его необходимо проанализировать с помощью JSON.
  • По умолчанию запрос отправляется асинхронно, что означает, что остальная часть кода выполняется в ожидании ответа сервера. Это можно изменить в вызове .open (), но это крайне не рекомендуется.

Свойства объекта XHR

  1. onreadystatechange - определяет функцию, которая будет вызываться при изменении свойства readyState
  2. readyState - содержит статус XMLHttpRequest (0… 4)
  3. responseText - возвращает данные ответа в виде строки
  4. responseXML - возвращает данные ответа как данные XML
  5. status - возвращает номер статуса запроса.
    200: «ОК»
    403: «Запрещено»
    404: «Не найдено»
  6. statusText - возвращает текст статуса (например, «ОК» или «Не найдено»).

Отправка запроса POST

Отправка запроса POST почти такая же, как и запрос GET, за исключением добавления 'setRequestHeader'. При использовании Fetch API отправка запроса POST требует, чтобы мы добавили необязательный объект после URL-адреса в вызове fetch (fetch (url, {object}), в котором мы определяем метод, заголовки и тело контента, который мы отправляем на сервер.

Используя XHR, мы определяем метод в вызове .open (), используем .setRequestHeader для добавления заголовков и .send () для добавления контента, который мы публикуем.

Это демонстрируется на примере из W3S:

Вот и все, ребята! Дайте мне знать, если вы когда-нибудь перейдете к использованию XHR, но поскольку стандарт со временем движется к Fetch API, большинство людей убеждены, что время XHR прошло.

Источник: MDN Docs