Проще всего увидеть использование HTTP API прямо в браузере. Для удобства разработки и тестирования, браузеры включают в себя панель разработчика, которая позволяет провести полный анализ страницы и происходящих внутри процессов. Сюда же входит информация о всех HTTP-запросах.
Чтобы открыть панель разработчика у себя в браузере, воспользуйтесь статьей. В этом курсе мы будем пользоваться панелью браузера Chrome. Остальные браузеры работают почти идентично, поэтому будет не сложно повторять все тоже самое в других браузерах.
Chrome DevTools
Здесь нас интересует вкладка Network (Сеть). На ней отображаются все запросы, которые выполняет браузер в процессе загрузки страницы. Сюда входят картинки, шрифты, файлы стилей, JavaScript и HTML самой страницы.
На каждый из загружаемых ресурсов можно нажать. Появится еще несколько вкладок с информацией о том, какой HTTP-запрос был отправлен и какой HTTP-ответ был получен. Здесь можно увидеть все заголовки и превью загруженного ресурса.
В этой же вкладке появляются запросы к HTTP API, которые выполняются в процессе взаимодействия со страницей использующий API. Чтобы отделить запросы к HTTP API от всего остального, на вкладке Network, нужно нажать кнопку Fetch/XHR, тогда в списке загружаемых ресурсов останутся ресурсы с типом xhr. Это как раз запросы к HTTP API.
Возьмем для примера топики на Хекслете. Когда пользователь задает вопрос или отвечает на него, то сайт выполняет запрос в API. Проверьте это самостоятельно:
- Откройте панель разработчика и перейдите на вкладку Network (Сеть). Нажмите Fetch/XHR.
- Откройте вкладку "Обсуждения"
- Создайте топик. В панели разработчика должен появиться запрос.
- Удалите этот топик. В панели разработчика появится еще один запрос.
Изучите эти запросы, посмотрите на URL, HTTP-заголовки, HTTP-метод, код ответа и отправленные данные (тело запроса). Точно таким же образом, можно изучать любой сайт.
Самостоятельная работа
Зайдите на Code-Basics. Перейдите в любое упражнение и изучите запрос который отправляется к API, когда запускается проверка решения.
Если все сделано верно, то вы увидите в DevTools как выполняется запрос, при нажатии на кнопку "Проверить".
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
- 130 курсов, 2000+ часов теории
- 900 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Используйте Хекслет по максимуму!
- Задавайте вопросы по уроку
- Проверяйте знания в квизах
- Проходите практику прямо в браузере
- Отслеживайте свой прогресс
Зарегистрируйтесь или войдите в свой аккаунт
Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу