Как сделать запрос на получение в браузере

Обновлено: 03.07.2024

Интерфейс запросов Fetch API представляет собой запрос ресурсов.

Вы можете создать новый объект Request с помощью конструктора Request(), но более вероятно, что объект Request будет возвращен в результате другой операции API, например сервисного работника FetchEvent.request .

Конструктор

Создает новый объект Request.

Свойства

ReadableStream содержимого тела.

Сохраняет значение true или false, чтобы указать, использовалось ли тело в запросе.

Содержит режим кэширования запроса (например, default , reload , no-cache ).

Содержит учетные данные запроса (например, omit , same-origin , include ). По умолчанию используется тот же источник .

Возвращает строку, описывающую назначение запроса. Это строка, указывающая тип запрашиваемого контента.

Содержит связанный с запросом объект Headers.

Содержит значение целостности подресурса запроса (например, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE= ).

Содержит метод запроса ( GET , POST и т. д.)

Содержит режим запроса (например, cors , no-cors , same-origin , navigation .)

Содержит режим обработки перенаправлений. Это может быть одно из следующих значений: follow , error или manual .

Содержит реферер запроса (например, клиент ).

Содержит политику реферера запроса (например, no-referrer ).

Содержит URL-адрес запроса.

Методы

Возвращает обещание, которое разрешается представлением ArrayBuffer тела запроса.

Возвращает обещание, которое разрешается с помощью представления тела запроса в виде BLOB-объекта.

Создает копию текущего объекта Request.

Возвращает обещание, которое разрешается представлением FormData тела запроса.

Возвращает обещание, которое разрешается с результатом синтаксического анализа тела запроса в формате JSON .

Возвращает обещание, которое разрешается текстовым представлением тела запроса.

Примечание. Функции тела запроса можно запустить только один раз; последующие вызовы разрешатся с пустыми строками/буферами массива.

Примеры

В следующем фрагменте мы создаем новый запрос с помощью конструктора Request() (для файла изображения в том же каталоге, что и скрипт), а затем возвращаем некоторые значения свойств запроса:

Затем вы можете получить этот запрос, передав объект Request в качестве параметра вызову fetch(), например:

В следующем фрагменте мы создаем новый запрос с помощью конструктора Request() с некоторыми начальными данными и содержимым тела для запроса API, которому требуется полезная нагрузка тела:

Примечание. Типом тела может быть только тип Blob , BufferSource , FormData , URLSearchParams , USVString или ReadableStream, поэтому для добавления объекта JSON в полезные данные необходимо преобразовать этот объект в строку.

Затем вы можете получить этот запрос API, передав объект Request в качестве параметра вызову fetch(), например, и получить ответ:

Сервер, на котором размещен основной веб-сайт Reddit, обрабатывает ваш запрос и возвращает ответ вашему браузеру. Ваш браузер достаточно умен, чтобы обработать отправленный ответ и отобразить сайт, который вы видите на снимке экрана, со всеми его цветами, изображениями, текстом и презентацией.

Использование инспектора

Не закрывая инспектор, нажмите на вкладку Сеть:

Вложенная вкладка по умолчанию Заголовки показывает заголовки запросов, отправленных на сервер, а также заголовки ответов, полученные от сервера.

Нажмите на вложенную вкладку Ответ, чтобы просмотреть необработанные данные ответа.

Еще один момент, на который следует обратить внимание при использовании вкладки Сеть в инспекторе, это то, что помимо первого запроса возвращается множество других запросов:

Вы должны увидеть только один запрос и ответ, содержащий HTML, но никаких дополнительных запросов, автоматически выдаваемых, как вы видите в браузере.

Методы запроса

Вернемся к диаграмме из шага 3 выше, когда мы рассмотрели ответы на вкладке Сеть. Возможно, вы заметили два столбца с именами «Метод» и «Статус». Если столбец «Метод» не отображается, возможно, он скрыт по умолчанию. Чтобы отобразить столбец «Метод», щелкните правой кнопкой мыши «Статус» и выберите Метод. Столбец «Метод» теперь должен отображаться рядом со столбцом «Статус».

В этом разделе мы рассмотрим, что означает информация, показанная в этих столбцах.

В столбце Статус отображается статус ответа на каждый запрос. Подробнее об ответах мы поговорим позже в этой книге. Важно понимать, что каждый запрос получает ответ, даже если ответ является ошибкой — это все равно ответ. (Технически это не на 100 % верно, так как время ожидания некоторых запросов может истечь, но мы пока отложим эти редкие случаи.)

GET-запросы

Пользователи curl могут ввести следующую команду на своем терминале:

перед отправкой запроса обязательно выберите ПОЛУЧИТЬ .

Команда curl для этого примера:

POST-запросы

Вот команда curl:

Давайте рассмотрим еще один пример выполнения запроса POST путем заполнения веб-формы. Наш образец формы выглядит в браузере следующим образом:

После заполнения формы вы будете перенаправлены на страницу, которая выглядит следующим образом:

Примечание. Убедитесь, что заголовок Content-Type имеет значение application/x-www-form-urlencoded . В противном случае ваш POST-запрос не будет правильно интерпретирован приложением.

Если вы используете Paw 3, выберите вкладку Form URL-Encoded вместо вкладки Text.
Если вы используете Insomnia, убедитесь, что вы выбрали "Form URL Encoded" в раскрывающемся меню Body. И если вы используете Postman, убедитесь, что переключатель для x-www-form-urlencoded выбран на вкладке Body.

Или вы можете использовать curl:

Обратите внимание, что на снимке экрана и в команде curl мы указываем дополнительный параметр player_name=albert . Это имеет тот же эффект, что и ввод имени в первое поле «Как тебя зовут?» форму и отправить ее.

Мы можем проверить содержимое с помощью инспектора (щелкните правой кнопкой мыши и выберите «Проверить» ). Вы увидите, что параметр player_name, который мы отправляем как часть POST-запроса, встроен в форму через атрибут name элемента ввода:

Запрос POST, сгенерированный инструментом HTTP или curl, аналогичен заполнению формы в браузере, отправке этой формы и последующему перенаправлению на следующую страницу. Внимательно посмотрите на необработанный ответ на снимке экрана инструмента HTTP. Ключевая информация, которая перенаправляет нас на следующую страницу, указана в поле Location: http://al-blackjack.herokuapp.com/bet. Расположение и связанные с ним данные являются частью того, что известно как заголовок ответа HTTP (да, запросы тоже имеют заголовки, но в данном случае это заголовок ответа). Пока не слишком беспокойтесь об этом, так как мы обсудим заголовки в следующем разделе. Ваш браузер видит заголовок ответа и автоматически отправляет новый запрос на URL-адрес, указанный в заголовке Location, тем самым инициируя новый, несвязанный запрос. Форма "Сделать ставку", которую вы видите, является ответом на этот второй запрос.

Примечание. Если вы используете какой-либо другой HTTP-инструмент, например Insomnia или Postman, вам, возможно, придется снять флажок "автоматически следовать перенаправлениям", чтобы увидеть заголовок ответа Location.

Если вы не поняли предыдущий абзац, прочитайте его еще раз. Очень важно понимать, что при использовании браузера браузер скрывает от вас большую часть лежащего в основе цикла HTTP-запроса/ответа. Ваш браузер выдал первоначальный запрос POST, получил ответ с заголовком Location, затем выдал другой запрос без каких-либо действий с вашей стороны, а затем отобразил ответ на этот второй запрос. Опять же, если бы вы использовали чистый HTTP-инструмент, вы бы увидели заголовок ответа Location из первого запроса POST, но инструмент не выдал бы вам второй запрос автоматически. (Некоторые инструменты HTTP имеют эту возможность, если вы отметите опцию «автоматически следовать перенаправлениям».)

Выше показаны различные заголовки, передаваемые во время цикла запроса/ответа. Кроме того, мы видим, что запрос и ответ содержат разные наборы заголовков в разделе «Заголовки запроса»:

Заголовки запроса

Не утруждайте себя запоминанием каких-либо заголовков запроса, просто знайте, что это часть запроса, отправляемого на сервер. Мы поговорим о заголовках ответа в следующей главе.

Обзор

Есть ли какие-либо функции в Chrome и/или Firefox, которых мне не хватает?

Несмотря на то, что дополнение необходимо, закрытие — это полная ерунда. Он просил функциональность в chrome или firefox, или если для этого нужен плагин. То, что для этого может потребоваться указанный или неуказанный плагин, не имеет значения

Пост закрыт некорректно. Он требует не инструмента, а функциональности инструментов, с которыми автор уже работает. Таким образом, мы должны закрыть все вопросы о том, как сделать то или иное на каком-то инструменте - и это будет хорошая десятая часть ТАК.

Я заметил эту функцию в Firefox, когда вы открываете вкладку сети и выбираете случайный запрос, который вы можете отредактировать и повторно отправить, что довольно круто.

16 ответов 16

Для таких вещей я делаю приложение для Chrome под названием Postman. Все остальные расширения казались немного устаревшими, поэтому я сделал свое собственное. Он также имеет множество других функций, которые были полезны для документирования нашего собственного API здесь.

У Postman теперь также есть нативные приложения (т. е. автономные) для Windows, Mac и Linux! Сейчас предпочтительнее использовать нативные приложения, подробнее здесь.

Инструмент может быть полезен, но стороннее приложение не отвечает на вопрос, который требует сделать это через Chrome или Firefox.

CURL потрясающе делает то, что вы хотите! Это простой, но эффективный инструмент командной строки.

Команды тестирования реализации REST:

Я голосую за это, хотя это неправильный ответ на вопрос: вместо этого мне нужно было знать это.

Это не работает для меня, я не могу использовать одинарные кавычки в OSX с zsh и bash, оболочка переходит в режим кавычек>. Мне нужно использовать -d "

Да, curl — это круто, он почти всегда уже есть в Unix, и он очень легкий для Windows. Без регистрации и смс! ;)

Windows cmd.exe также не любит одинарные кавычки, поэтому для POST я использовал: curl -i -X POST -H "Content-Type: application/json" -d "" localhost:60524

Файрфокс

Откройте панель «Сеть» в инструментах разработчика, нажав Ctrl+Shift+E или выбрав Панель меню -> Инструменты -> Веб-разработчик -> Сеть. Затем нажмите на маленький значок двери в правом верхнем углу (в развернутом виде на скриншоте вы найдете его слева от выделенных заголовков), второй ряд (если вы его не видите, перезагрузите страницу) -> Редактировать и повторно отправьте любой запрос, который вы хотите

Эта функция недоступна для кого-либо еще? При редактировании параметров в поле «Строка запроса» после изменения одного символа он отказывается изменять запрос дальше. Единственный способ сделать это помимо этого — отредактировать весь URL/запрос (что сложно, потому что все смешано вместе)

@Coldblackice Можете ли вы опубликовать скриншот или регистратор шагов, пожалуйста? Я могу редактировать строку запроса просто отлично.Чтобы добавить новую строку запроса, я либо использую &=, либо просто начинаю новую строку. Чтобы отредактировать, измените отдельные k,v или просто удалите и начните сначала.

@dima-lituiev, скриншоты выше для Firefox, и я подтвердил, что он работает в Firefox версии 88.0.1

Я также подтвердил, что это работает в Firefox 88.0.1. Однако в моем случае кнопка "Изменить и отправить повторно" не отображается. Мне нужно щелкнуть правой кнопкой мыши запрос, а затем нажать «Открыть в сетевой панели». Оттуда я могу щелкнуть раскрывающийся список «Повторно отправить» в правом верхнем углу и выбрать «Редактировать и повторно отправить». Престижность этого решения становится сильным годы спустя. У вас даже есть возможность создать команду fetch() для запроса, который будет использоваться в консоли, как изначально запрашивал OP.

Если вы настаиваете на расширении браузера, то:

Хром:

Файрфокс:

@akostadinov я не могу использовать надстройку проверки ресурсов в Mozilla, инструмент не отображается (даже после установки и перезапуска) в инструментах разработчика в последней версии Firefox.

Только что попробовал REST Easy. Удаляется на месте: интерфейс делает слишком много рук и вынуждает пользователя использовать жесткие варианты использования. Не подходит для разработки API.

Вдохновленный Postman для Chrome, я решил написать нечто подобное для Firefox.

REST Easy* – это надстройка для Firefox, не требующая перезапуска и обеспечивающая максимально возможный контроль над запросами. Надстройка все еще находится в экспериментальном состоянии ~~(Mozilla еще даже не рассмотрела ее)~~, но разработка идет успешно.

Выглядит неплохо, но не позволяет полностью контролировать тело запроса. В настоящее время он предлагает возможности ключ/значение, но было бы неплохо получить полный контроль над телом сообщения.

@Pacerier: это функция, над которой я сейчас работаю, и я готов примерно на 90%. Надеюсь, он выйдет до конца года. Похоже, Mozilla не одобряет надстройки.

После более месяца ожидания новая версия была одобрена. Прибыла поддержка PUT и DELETE! И за этот месяц я также внес массу других новых изменений, которые скоро появятся в следующем выпуске. (Надеемся, на этот раз он будет одобрен раньше.)

Вы специально просили "расширение или функциональность в Chrome и/или Firefox", что содержится в ответах, которые вы уже получили, но мне нравится простота ответа oezi на закрытый вопрос "Как я могу отправить POST-запрос с помощью веб-браузера?" для простых параметров. Оэзи говорит:

Для формы просто установите метод "опубликовать"

То есть создайте себе очень простую страницу для проверки действий POST.

Для тех, кто не знает, я добавлю: в качестве действия вы указываете ресурс, который хотите получить (который может включать параметры запроса в стиле GET), а значение указывает тело данных POST. Например. action="api/ids?name=John" и value="hello" отправят запрос POST к /api/ids?name=John с текстом hello .

Вот расширенное клиентское расширение REST для Chrome.

У меня он отлично работает — помните, что с ним по-прежнему можно использовать отладчик. Панель «Сеть» особенно полезна; это даст вам визуализированные объекты JSON и страницы ошибок.

Для Firefox также есть расширение RESTClient, которое очень удобно:

Некоторые преимущества команды fetch действительно ценны: она простая, короткая, быстрая, доступная и даже в качестве консольной команды сохраняется на вашей консоли Chrome и может быть использована позже.

Простота нажатия F12 , записи команды на вкладке консоли (или нажатия клавиши вверх, если вы использовали ее ранее), затем нажатия Enter , просмотра ее ожидания и возврата ответа — вот что делает ее действительно полезной для простых тестов POST-запросов. .

Конечно, основным недостатком здесь является то, что, в отличие от Postman, это не пройдет политику кросс-происхождения, но все же я нахожу это очень полезным для тестирования в локальной среде или других средах, где я могу включить CORS вручную.

Саид Хаяни

Если вы откроете консоль браузера, она вернет массив данных в формате JSON. Но как мы узнаем, выполнен ли запрос? Другими словами, как мы можем обрабатывать ответы с помощью Ajax?

Свойство onreadystatechange имеет два метода, readyState и status, которые позволяют нам проверять состояние нашего запроса.

Если readyState равно 4, это означает, что запрос выполнен. Свойство readyState имеет 5 ответов. Узнайте больше об этом здесь.

Методы jQuery

Метод $.ajax принимает множество параметров, некоторые из которых являются обязательными, а другие необязательными. Он содержит два параметра обратного вызова: успех и ошибка для обработки полученного ответа.

Метод $.get

Метод $.get используется для выполнения запросов GET. Он принимает два параметра: конечную точку и функцию обратного вызова.

Метод $.post — это еще один способ отправки данных на сервер. Он принимает три параметра: URL-адрес, данные, которые вы хотите опубликовать, и функцию обратного вызова.

$.getJSON

Метод $.getJSON извлекает только данные в формате JSON. Он принимает два параметра: URL-адрес и функцию обратного вызова.

В jQuery есть все эти методы для запроса или отправки данных на удаленный сервер. Но на самом деле вы можете объединить все эти методы в один: метод $.ajax, как показано в примере ниже:

получить

Функция выборки принимает один обязательный параметр: URL конечной точки. У него также есть другие необязательные параметры, как в примере ниже:

Аксиос

Использование:

Во-первых, вам необходимо подключить Axios. Есть два способа включить Axios в свой проект.

Во-первых, вы можете использовать npm:

Тогда вам нужно импортировать его

Во-вторых, вы можете включать аксиомы с помощью CDN.

Выполнение запроса с помощью аксиом:

С помощью Axios вы можете использовать GET и POST для получения и отправки данных с сервера.

axios принимает один обязательный параметр и может также принимать второй необязательный параметр. Некоторые данные принимаются в виде простого запроса.

Axios возвращает «обещание». Если вы знакомы с промисами, вы, вероятно, знаете, что промис может выполнять несколько запросов. Вы можете сделать то же самое с axios и запустить несколько запросов одновременно.

Axios поддерживает множество других методов и параметров. Вы можете ознакомиться с ними здесь.

Затем нам нужно создать службу для обработки запросов. Вы можете легко создать сервис с помощью Angular CLI.

Наконец, вызовите службу и запустите ее.

Вы можете посмотреть демонстрационный пример на Stackblitz.

Подведение итогов

Спасибо за ваше время. Если вам это нравится, хлопайте в ладоши до 50, нажмите «Подписаться» и свяжитесь со мной в Твиттере.

Читайте также: