Работа с API

Что вам гарантировано, а что — иллюзия

Когда вы начинаете работать с API в Angular, обещания «всё будет работать из коробки» — это ловушка. Гарантировано только одно: если вы правильно настроите HTTP-клиент, укажете корректные заголовки и обработаете ошибки — данные придут. Но если забудете про interceptor для токена или не добавите retry при 429 статусе — получите зависшее приложение с пустым экраном.

На практике я даю вам три железобетонные гарантии: (1) вы научитесь отличать 200 от 201 и понимать, почему POST возвращает 400 — за 40 минут; (2) вы сможете задеплоить Angular-приложение с Firebase или JSON-server за вечер; (3) если в течение 14 дней после старта курса у вас возникнет ошибка с CORS или 404 — я подключаюсь лично и разбираю её за 30 минут через скринкаст.

Риски, которые вы не можете игнорировать

Самый частый риск — вы путаете REST API с GraphQL и пытаетесь мутировать данные через GET-запрос. Второй — забываете экранировать URL-параметры, и сервер отдаёт 500 из-за спецсимволов. Третий — не проверяете статус ответа: считаете, что раз нет ошибки, то массив пришёл, а там null или объект.

• Риск №1: неправильная аутентификация. Решение — используйте Angular HTTP interceptor. Он автоматом добавит Bearer-токен во все запросы. Если токен истёк — будет перехват с запросом на refresh и повторным вызовом.
• Риск №2: забываете про таймауты. Если сервер не отвечает 120 секунд, вы показываете пользователю бесконечный спиннер. Решение — задайте таймаут в 10 секунд через pipe(timeout(10000)) и обработайте его как TimeoutError.
• Риск №3: игнорируете кэширование. При каждом входе на страницу шлёте GET-запрос — даже если данные не менялись. Решение — используйте RxJS BehaviourSubject + switchMap: при изменении параметров запрос летит повторно только если они реально изменились.
• Риск №4: не обрабатываете race condition. Пользователь дважды кликает кнопку «Сохранить» — улетает два POST. Решение — disable кнопки после первого клика или используйте exhaustMap: пока первый запрос не завершится, второй игнорируется.
• Риск №5: код сокрыт в компоненте. Вы пишете HTTP-запросы прямо внутри ngOnInit — тестировать такой компонент невозможно. Решение — выносите всю логику в сервисы и inject их в компонент. Тогда тесты будут чистыми.

Конкретные инструменты, которые решают 90% проблем

Вы не поверите, но 70% ошибок с API в Angular решаются тремя инструментами: (1) Angular HTTP Client с TypeScript-типами — он на этапе компиляции ловит несоответствие полей; (2) Postman или Insomnia — для быстрого теста эндпоинта перед написанием кода; (3) Chrome DevTools — сеть и консоль показывают реальный запрос и ответ, включая заголовки.

Вот как этим пользоваться на практике. Открываете DevTools → вкладка Network → фильтр XHR. Видите точный URL, статус, время. Если ответ пришёл, но Angular не обновил UI — проверьте: вы не забыли subscribe? Ещё один трюк: используйте tap(response => console.log('API response:', response)) внутри pipe — это дебаг-спасатель.

Как не пожалеть о выборе курса/сервиса

Выбирая обучение работе с API, проверьте три вещи. Первая: есть ли в программе реальный проект с JSON-server или локальным REST API — не только фейковые примеры из учебников. Вторая: показывают ли вам работу с ошибками (401, 404, 500) — 90% курсов дают только успешные сценарии. Третья: учат ли вас писать unit-тесты для сервисов с HttpClientTestingController — без этого вы будете гадать, почему код падает.

1. Проверьте, что на курсе есть модуль «HTTP Interceptors: токены, кэширование и таймауты» — это база.
2. Посмотрите, дают ли схему «Retry with backoff» — три попытки с задержкой 2 секунды при 429 ошибке.
3. Узнайте, объясняют ли разницу между HttpParams и интерполяцией URL — это спасёт от SQL-инъекций в API.
4. Спросите, есть ли пример подписки через async pipe — это автоматическая отписка и отсутствие утечки памяти.
5. Проверьте, что в проекте используется Environment для разных баз URL (dev/prod) — иначе при релизе всё сломается.
6. Убедитесь, что вас научат работать с CORS — не просто «добавь заголовки», а настройка proxy.conf.json для разработки.
7. Важно: в курсе должен быть live-кодинг, где вы пишете сервис с нуля — не только смотрите слайды.

Пошаговая схема: как настроить API-запрос без слёз

Шаг первый: откройте терминал и выполните ng generate service api/user. Это создаст сервис. Шаг второй: пропишите импорт HttpClientModule в AppModule — иначе запросы не улетят. Шаг третий: в сервисе укажите baseUrl через environment.apiUrl — чтобы при смене бэкенда менять одну строку. Шаг четвёртый: напишите метод getUsers(): Observable<User[]> с типизацией. Шаг пятый: в компоненте используйте this.userService.getUsers().subscribe(...) и не забудьте про unsubscribe через takeUntil или async pipe.

Важно: если данные приходят в обёртке (например, {data: {users: [...]}}), сделайте интерфейс ApiResponse и маппинг через pipe(map()). Иначе в компоненте будет путаница и undefined.

Что делать, если API не отвечает — чек-лист

За пятнадцать минут можно диагностировать 95% проблем. Возьмите этот список и проверяйте по порядку.

• Проверьте, работает ли эндпоинт в Postman: если там ошибка — проблема на сервере, а не в Angular.
• Посмотрите в DevTools: если запрос вообще не ушёл — забыли subscribe или interceptor блокирует (например, нет токена).
• Проверьте статус: 200 — успех, но данные могут быть пустыми (читайте тело); 401 — истёк токен, нужен refresh; 403 — нет прав; 404 — неверный URL или метод (GET вместо POST).
• Если запрос ушёл, но пришёл HTML вместо JSON — скорее всего, запрос ушёл на фронтенд-роутер, а не на бэкенд. Проверьте прокси в angular.json.
• Проверьте заголовки: server не возвращает Access-Control-Allow-Origin — это CORS, добавьте proxy.conf.json с target: 'http://localhost:4000'.
• Проверьте сетевое табло: если есть pending дольше 30 секунд — таймаут; добавьте timeout() в pipe.
• Если ошибка в консоли: Http failure during parsing — ответ не JSON. Используйте {responseType: 'text'} и парьте руками.

Запомните: 85% проблем решаются правильным типом запроса, заголовком Content-Type и проверкой CORS. Всё остальное — редкий ад. Если мы в течение первого часа не нашли причину — вы получаете экстренный созвон со мной лично, и мы смотрим ваш код через screen share.

Добавлено: 23.04.2026