Недавно я выполнил задачу по коду, в которой меня попросили сделать 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.
Как вы это реализуете?
- Сначала необходимо инициализировать объект XHR.
2. Нам нужно определить прослушиватель событий для обработки случаев успеха и ошибок.
3. Затем необходимо выполнить вызов XHR.open («Тип запроса HTTP», URL, [необязательный синхронный аргумент]) для инициализации запроса, а затем отправить его с помощью XHR.send ().
Важные моменты, на которые следует обратить внимание:
- Слушатели событий для обработки случаев успеха и ошибок должны быть определены ДО вызова .open.
- По умолчанию ответ получается в виде строки, и его необходимо проанализировать с помощью JSON.
- По умолчанию запрос отправляется асинхронно, что означает, что остальная часть кода выполняется в ожидании ответа сервера. Это можно изменить в вызове .open (), но это крайне не рекомендуется.
Свойства объекта XHR
- onreadystatechange - определяет функцию, которая будет вызываться при изменении свойства readyState
- readyState - содержит статус XMLHttpRequest (0… 4)
- responseText - возвращает данные ответа в виде строки
- responseXML - возвращает данные ответа как данные XML
- status - возвращает номер статуса запроса.
200: «ОК»
403: «Запрещено»
404: «Не найдено» - statusText - возвращает текст статуса (например, «ОК» или «Не найдено»).
Отправка запроса POST
Отправка запроса POST почти такая же, как и запрос GET, за исключением добавления 'setRequestHeader'. При использовании Fetch API отправка запроса POST требует, чтобы мы добавили необязательный объект после URL-адреса в вызове fetch (fetch (url, {object}), в котором мы определяем метод, заголовки и тело контента, который мы отправляем на сервер.
Используя XHR, мы определяем метод в вызове .open (), используем .setRequestHeader для добавления заголовков и .send () для добавления контента, который мы публикуем.
Это демонстрируется на примере из W3S:
Вот и все, ребята! Дайте мне знать, если вы когда-нибудь перейдете к использованию XHR, но поскольку стандарт со временем движется к Fetch API, большинство людей убеждены, что время XHR прошло.
Источник: MDN Docs