W Softverno Wiki
День 3–4 · Погружение

HTTP, API, REST, коды ответов и DevTools

Объяснение простыми словами — без «магии» и сложного жаргона. Если вы не из IT, этого хватит, чтобы понимать, что происходит, когда сайт «думает», «не грузится» или «выдаёт ошибку».

← Мини-план погружения

Что такое HTTP

Аналогия: представьте ресторан. Вы (браузер) говорите официанту: «Принесите меню». Официант относит заказ на кухню (сервер) и возвращается с ответом: меню, отказ или «блюда нет».

HTTP — это правила, по которым браузер и сервер разговаривают друг с другом через интернет.

Каждый раз, когда вы открываете сайт, нажимаете «Войти» или отправляете форму, происходит примерно одно и то же:

  1. Запрос (request) — браузер просит что-то у сервера.
  2. Ответ (response) — сервер отвечает: данными, ошибкой или подтверждением.
Пример разговора браузер ↔ сервер
Вы нажали «Открыть профиль»
→ Запрос: GET /profile «дай страницу профиля»
← Ответ: 200 OK + данные профиля

Вы отправили неверный пароль
→ Запрос: POST /login
← Ответ: 401 Unauthorized «доступ запрещён»

Самые частые «слова» запроса

  • GET — «покажи / принеси данные» (открыть страницу, список, карточку).
  • POST — «создай / отправь» (регистрация, форма, заказ).
  • PUT / PATCH — «измени» (обновить профиль).
  • DELETE — «удали».

Для новичка главное не запомнить все методы, а понять: сайт почти всегда работает через запросы и ответы, даже если вы этого не видите.

Что такое API

Аналогия: API — это меню и правила заказа. Вам не нужно заходить на кухню: вы говорите понятными фразами («дай список заказов», «создай пользователя»), а система отвечает по договорённости.

API (Application Programming Interface) — способ, которым программы договариваются общаться друг с другом.

Простыми словами: это «окно» или «контракт» между клиентом и сервером (или между двумя сервисами):

  • какие запросы можно отправлять;
  • по каким адресам;
  • в каком формате данные;
  • какие ответы ожидать.
Пример API заказа
Мобильное приложение просит:
→ GET /api/orders «дай мои заказы»
← ответ API: список заказов в формате данных

Сайт создаёт заказ:
→ POST /api/orders + данные заказа
← ответ API: 201 и номер нового заказа

Зачем API нужен

  • чтобы сайт, мобильное приложение и админка могли работать с одними и теми же данными;
  • чтобы сервисы общались друг с другом (оплата, SMS, аналитика);
  • чтобы команда могла менять «кухню», не ломая понятный «меню-контракт».

HTTP — как идёт разговор по сети. API — о чём договорились говорить и какие команды доступны. REST — один из популярных стилей такого API.

Что такое REST

Аналогия: REST — это договорённость, как именно оформлять заказы в ресторане. Не «принеси чего-нибудь», а чётко: «меню», «стол 5», «заказ №12».

REST — популярный стиль построения API поверх HTTP.

Простыми словами: у каждой «вещи» в системе есть адрес, а действие выбирается методом запроса.

  • GET /users — получить список пользователей
  • GET /users/42 — получить пользователя №42
  • POST /users — создать нового пользователя
  • DELETE /users/42 — удалить пользователя №42

Зачем это тестировщику и новичку

Когда на экране «ничего не произошло», часто проблема не в кнопке, а в ответе сервера: данные не пришли, пришла ошибка или пришёл не тот формат.

REST помогает думать так:

  • какой адрес дернули?
  • что отправили?
  • что получили обратно?

Коды ответов

Аналогия: код ответа — короткий статус от кухни. Не длинное письмо, а быстрый сигнал: «готово», «не так заказали», «кухня сломалась».

Сервер почти всегда отвечает числом из 3 цифр. Запоминать все не нужно — достаточно групп.

2xx

Успех

Всё прошло нормально. Самый частый — 200 OK («всё хорошо»). 201 Created — «создали новую запись».

3xx

Перенаправление

Вас отправили в другое место. Как табличка «касса переехала». Часто бывает после логина.

4xx

Ошибка на стороне запроса

Проблема в том, что попросили. 400 — кривой запрос, 401 — не вошли, 403 — нет прав, 404 — не найдено.

5xx

Ошибка на стороне сервера

Запрос мог быть нормальным, но сервер споткнулся. 500 — «внутренняя ошибка». Это уже зона разработки/инфраструктуры.

Самые полезные коды на старте

  • 200 — успех
  • 201 — создано
  • 400 — неправильный запрос
  • 401 — нужна авторизация
  • 403 — запрещено
  • 404 — страница/данные не найдены
  • 500 — ошибка сервера

Правило для новичка: 4xx — чаще «мы/клиент ошиблись», 5xx — «сломалось на сервере».

Что такое DevTools

Аналогия: DevTools — это «рентген» сайта. Снаружи виден красивый интерфейс, а внутри можно увидеть, какие запросы ушли и что вернулось.

DevTools (Developer Tools) — встроенные инструменты браузера для разработчиков и тестировщиков.

Открываются обычно так:

  • Windows / Linux: F12 или Ctrl+Shift+I
  • macOS: Cmd+Option+I
  • или правый клик по странице → «Просмотреть код»

Какие вкладки нужны в первые дни

  • Elements / Элементы — из чего собран экран (кнопки, тексты, формы).
  • Console / Консоль — сообщения и ошибки JavaScript. Красный текст = тревожный сигнал.
  • Network / Сеть — список HTTP-запросов: что ушло на сервер и какой код вернулся.
Вкладка Network упрощённый вид
200 GET /api/orders список заказов
201 POST /api/orders создали заказ
401 POST /api/login неверный пароль
500 GET /api/report сервер упал

Как смотреть Network без паники

  1. Откройте DevTools → вкладка Network.
  2. Обновите страницу или повторите действие (логин, сохранение, поиск).
  3. Найдите запрос, который связан с действием.
  4. Посмотрите код ответа: 200 / 400 / 401 / 404 / 500.
  5. Откройте запрос и загляните в Response — что именно вернул сервер.

Даже если вы не понимаете весь JSON, уже полезно увидеть: «запрос ушёл», «ответил 500», «данных нет».

Мини-практика на 15–20 минут

  1. Откройте любой сайт (можно softverno.ru).
  2. Откройте DevTools → Network.
  3. Обновите страницу и найдите хотя бы один запрос со статусом 200.
  4. Попробуйте открыть несуществующий адрес, например /qwerty-test-404, и найдите 404.
  5. Своими словами запишите: что такое запрос, что такое ответ, чем 4xx отличается от 5xx.

Если можете объяснить это другу без сложных слов — день 3–4 пройден.

Термины: Web, API → Термины: DevTools / Postman → Дальше: День 5 · SQL →