Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

HTTP запросы в браузере HTTP API

Проще всего увидеть использование HTTP API прямо в браузере. Для удобства разработки и тестирования, браузеры включают в себя панель разработчика, которая позволяет провести полный анализ страницы и происходящих внутри процессов. Сюда же входит информация о всех HTTP-запросах.

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

Панель Разработчика Chrome

Chrome DevTools

Здесь нас интересует вкладка Network (Сеть). На ней отображаются все запросы, которые выполняет браузер в процессе загрузки страницы. Сюда входят картинки, шрифты, файлы стилей, JavaScript и HTML самой страницы.

Вкладка Сеть во время загрузки Code Basics

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

Загрузка HTML для Code Basics

В этой же вкладке появляются запросы к HTTP API, которые выполняются в процессе взаимодействия со страницей использующий API. Чтобы отделить запросы к HTTP API от всего остального, на вкладке Network, нужно нажать кнопку Fetch/XHR, тогда в списке загружаемых ресурсов останутся ресурсы с типом xhr. Это как раз запросы к HTTP API.

Возьмем для примера топики на Хекслете. Когда пользователь задает вопрос или отвечает на него, то сайт выполняет запрос в API. Проверьте это самостоятельно:

  1. Откройте панель разработчика и перейдите на вкладку Network (Сеть). Нажмите Fetch/XHR.
  2. Откройте вкладку "Обсуждения"
  3. Создайте топик. В панели разработчика должен появиться запрос.
  4. Удалите этот топик. В панели разработчика появится еще один запрос.

Изучите эти запросы, посмотрите на URL, HTTP-заголовки, HTTP-метод, код ответа и отправленные данные (тело запроса). Точно таким же образом, можно изучать любой сайт.


Самостоятельная работа

Зайдите на Code-Basics. Перейдите в любое упражнение и изучите запрос который отправляется к API, когда запускается проверка решения.

Если все сделано верно, то вы увидите в DevTools как выполняется запрос, при нажатии на кнопку "Проверить".


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

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

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
30 июня 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
30 июня 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
30 июня 16 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
30 июня 10 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Изображение Тото

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