HTTP - работа с DevTools и Postman

Здравствуй, дорогой читатель. Мы уже разобрали основы протокола HTTP тут, и теперь рассмотрим его с практической точки зрения. Я расскажу о том, как просматривать выполняемые HTTP-запросы в браузере, и как выполнять их самому с помощью программы Postman. Я буду использовать браузер Mozilla, но если у вас какой-то другой браузер - не беспокойтесь, там всё очень похоже.

Dev Tools

Dev Tools, или инструменты разработчика - это набор утилит, встроенных в браузер, для просмотра работы над сайтом/веб-приложением в реальном времени. С помощью этих инструментов можно экспериментировать с вёрсткой, тестировать и отлаживать JavaScript и многое другое. Для работы с http-запросами используется вкладка "Сеть" (Network). Чтобы открыть dev tools сразу с этой вкладки, нажмите "ctrl + shift + e".

Рассматривать выполняемые запросы будем на примере сайта ВКонтанте. Для этого с открытыми инструментами разработчика перейдём на vk.com. Мы получили множество различных запросов, которые произвела страница для получения данных.

В первой колонке показан код, с которым завершился запрос. Код 302 указывает, что для получения ресурса нужно совершить редирект (переадресацию) на другой URL. В заголовке ответа Location указывается адрес, на который перейдёт наш браузер. Мы можем нажать на самый первый запрос, чтобы посмотреть более подробную информацию. Найдём заголовок "Location" во вкладке "Заголовки" (Headers)

И действительно, в адресной строке теперь не vk.com, а vk.com/feed. Следующим запросом наш браузер получил html-код запрашиваемой страницы. Тело ответа можно посмотреть во вкладке "Ответ" (Response, Preview)

По сети браузер и приложение, помимо html-документов и запросов к серверу также подтягивают различные скрипты и стили. Их мы рассматривать не будем.

Теперь попробуем закрыть вк и перейти на habr.com с открытыми инструментами разработчика. Во вкладке "Сеть" выберем запросы xhr. Это как раз те запросы, которые фронтенд сайта отправляет на сервер для получения данных. Клиентское приложение затем генерирует html-код, который мы видим.

Например рассмотрим запрос, который возвращает данные о разделе "Минуточку внимания":

Также можно рассмотреть и остальные запросы - исследуйте!

Postman

А теперь попробуем найти какое-нибудь публичное API и попробуем повзаимодействовать с ним.

Postman - это инструмент для тестирования API. Он позволяет отравлять http-запросы, сохранять их в коллекции, создавать тесты для API и многое другое. Мы остановимся на простой отправке запросов. Скачать его можно тут.

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

Чтобы создать запрос, надо нажать на "+" в панели запросов. Нас встречает такой интерфейс:

1. Поле для выбора типа запроса. Чаще всего используются "POST", "GET", "PUT", "DELETE"
2. Поле для ввода адреса
3. Панель настройки данных в запросе
4. Панель с отображением ответа на запрос

Рассмотрим панель настройки данных:

Params

Тут можно настроить query parameters. Это набор пар "ключ-значение", которые указываются в конце url-запроса. Например в запросе "http://example.com?key=12&data=string" параметрами будет key и data, а их значениями - 12 и "string"

Authorization

Здесь настраивается авторизация. При выборе определённого типа откроется форма с полями, которые необходимо заполнить. Самые распространённые типы авторизации - "Basic Auth":

и "Bearer Token":

Headers

Это заголовки запроса - дополнительные поля с разными метаданными. В этой вкладке сохраняются заголовки авторизации, информация про user-agent и многое другое. Чаще всего здесь не нужно ничего указывать

Body

В этой вкладке можно описать тело запроса. Это основные данные, которые передаются в запросе. Можно выбрать типы "form-data", "xxx-form-urlencoded", или "raw", который даёт нам выбор ещё нескольких типов:

Выбрав тип "raw" и "JSON" мы получим самый распространённый тип передачи данных "application/json".

Практика

Попробуем воспользоваться API на практике. Для этого я написал своё тестовое приложение, где есть регистрация, авторизация и оформление неких абстрактных заявок.

Для документирования API часто используется такой инструмент, как swagger. Для моего приложения он доступен по следующей ссылке - http://api-demo-article.herokuapp.com/swagger/index.html.

В нём отображаются все конечные точки - методы, которые мы можем использовать для взаимодействия с системой.

Для начала попробуем произвести регистрацию. Так как она, по своей сути, является созданием пользователя, мы используем эндпоинт /api/user с методом POST. Чтобы посмотреть подробную информацию о запросе, нужно на него нажать.

Мы видим, что в запросе присутствует тело с типом application/json, и он ожидает следующий набор полей:

{ 
  "login": "string", 
  "password": "string", 
  "firstName": "string", 
  "middleName": "string", 
  "lastName": "string" 
}

Попробуем зарегистрироваться через API - для этого откроем Postman, выберем метод POST и введём нужный URL и заполним тело запроса.

Чтобы отправить запрос, нужно нажать на "Send". Внизу будет отображён ответ

Здесь указан статусный код (в нашем случае 200 OK - успешное выполнение), время за которое был выполнен запрос и прочая информация. Ниже мы видим тело ответа - тоже данные в формате JSON, с моделью описанной в документации. Обратите внимание на токен - это токен авторизации. Он указывается в заголовках запросов, требующих авторизации. В разработанном приложении применён тип авторизации Bearer, суть которого как раз и заключается в применении таких токенов. Подробнее про это можно почитать в отдельной статье.

Попробуем создать заявку. Для этого в документации выберем post-запрос в разделе Order:

и воспроизведём его в Postman, в отдельной вкладке. Как мы видим, в запросе требуется указать идентификатор пользователя - UserId. Скопируем его из ответа предыдущего запроса - из поля Id и попробуем отправить запрос:

Как мы видим, мы получили пустой ответ со статусом 401 - Unauthorized. Чтобы авторизоваться, нужно перейти во вкладку Auth, выбрать там тип Bearer Token и вставить токен из ответа предыдущего запроса. Если вы случайно закрыли вкладку с предыдущим запросом или написали новый запрос в ней же - воспользуйтесь методом GET, описанном в документации (помните, что query-параметры указываются во вкладке params)

Вставим полученный токен в поле для ввода:

Перейдя во вкладку Headers мы увидим новый заголовок Authorization - токены авторизации как раз передаются в заголовках запроса. Попробуем выполнить запрос снова:

Мы получили успешный ответ. В документации также указан метод api/order/all, позволяющий получить все доступные заявки. Воспользуемся им:

Мы получили массив с одним элементом - созданной нами заявкой.

Для закрепления попробуйте самостоятельно попробовать разные запросы на данное приложение.

Вывод:

Мы научились смотреть выполняемые запросы в dev-tools, а также пользоваться Postman. Это может пригодиться каждому разработчику, тестировщику и другим IT-специалистам.

Спасибо за внимание!

С вами был Flex Code