HTTP, mock API и ошибки

Что вы узнаете

• Включать HTTP через provideHttpClient()
• Делать GET / POST / PATCH / DELETE к json-server
• Обрабатывать ошибки через catchError
• Управлять состояниями loading / empty / error

Задание 1. Включение HttpClient

Контекст. Прежде чем делать запросы, Angular надо сказать: «У нас есть курьер, разреши им пользоваться». Делается это один раз при запуске приложения (в файле, где вызывается bootstrapApplication).

Аналогия из жизни 💡 Это как выдать сотруднику пропуск на курьерскую службу. Без пропуска он не сможет забирать посылки, как бы вы его ни просили.

Пошаговый разбор.

• Шаг 1. Импортируем функцию provideHttpClient из Angular.
• Шаг 2. Передаём её в список providers при запуске приложения — это и есть «выдача пропуска».

Что увидит студент. Сам по себе этот код ничего на экране не рисует. Но если его забыть — все запросы дальше будут падать с ошибкой «No provider for HttpClient».

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()] // "выдаём пропуск" курьеру HttpClient
});

Задание 2. CRUD в сервисе

Контекст. Теперь создадим «отдел доставки» — сервис TaskService, который умеет брать задачи, добавлять, менять и удалять их на сервере. В TaskFlow это список дел: каждая задача — отдельная запись.

Аналогия из жизни 💡 CRUD — это четыре действия с заказами в магазине:
• GET — «покажите, что у вас есть» (получить список).
• POST — «приняли новый заказ» (создать).
• PATCH — «поменяйте в заказе одну строку» (обновить часть).
• DELETE — «отмените заказ» (удалить).
Сам сервис — это курьер HttpClient, который везёт заказ.

Пошаговый разбор.

• Шаг 1. Через inject(HttpClient) получаем курьера внутрь сервиса.
• Шаг 2. Запоминаем адрес склада base — путь к задачам на сервере.
• Шаг 3. Каждая функция вызывает свой метод у курьера (get/post/patch/delete) по нужному адресу.

Что увидит студент. На экране опять ничего не появится — это пока только «инструкции для курьера». Но теперь у приложения есть готовый набор методов, чтобы управлять задачами.

@Injectable({ providedIn: 'root' }) // сервис доступен во всём приложении
export class TaskService {
  private http = inject(HttpClient); // наш "курьер"
  private base = 'http://localhost:3000/tasks'; // адрес склада задач

  // GET: "покажите все задачи"
  getAll()   { return this.http.get<Task[]>(this.base); }
  // POST: "создайте новую задачу" (d — данные новой задачи)
  create(d)  { return this.http.post<Task>(this.base, d); }
  // PATCH: "поменяйте задачу t" (меняем только переданные поля)
  update(t)  { return this.http.patch<Task>(`${this.base}/${t.id}`, t); }
  // DELETE: "удалите задачу с id"
  remove(id) { return this.http.delete<void>(`${this.base}/${id}`); }
}

Задание 3. Обработка ошибок

Контекст. Сервер может лежать, интернет — отвалиться, а адрес — быть неправильным. Надо не уронить приложение, а аккуратно вернуть пустой список и дать понять, что что-то пошло не так.

Аналогия из жизни 💡 catchError — это сетка безопасности (ловит падение, чтобы не разбить программу). Если курьер споткнулся (сервер ответил ошибкой), он не падает вниз и не ломает всё шоу, а приземляется в сетку и возвращается с пустыми руками, но живой.

Пошаговый разбор.

• Шаг 1. Берём результат запроса и пропускаем его через pipe() — конвейер обработки.
• Шаг 2. Внутри catchError ловим ошибку err.
• Шаг 3. Пишем ошибку в консоль, чтобы разработчик её видел.
• Шаг 4. Возвращаем of([]) — пустой список как безопасную «подушку».

Что увидит студент. Если сервер упал, приложение не «вылетит». Подписчик получит просто пустой массив, и экран останется рабочим.

getAll() {
  return this.http.get<Task[]>(this.base).pipe(
    catchError(err => {                 // сетка безопасности
      console.error('Ошибка загрузки:', err); // сообщаем разработчику
      return of<Task[]>([]); // пустой список вместо падения
    })
  );
}

Задание 4. Конечный автомат UI

Контекст. Компонент должен показать пользователю ровно одно из четырёх «состояний посылки». Это называется конечный автомат: в каждый момент времени экран находится в одном состоянии.

Аналогия из жизни 💡 Три (на самом деле четыре) состояния посылки:
• loading — «посылка в пути», показываем «Загрузка…».
• empty — «пришла, но коробка пустая», пишем «Задач нет».
• success — «пришли ваши задачи», рисуем список.
• error — «посылка потерялась», показываем ошибку.
Как в трекере заказов: нельзя одновременно и «в пути», и «доставлено».

Пошаговый разбор.

• Шаг 1. Описываем тип State — все допустимые варианты с их данными.
• Шаг 2. В шаблоне проверяем state().status по очереди через @if.
• Шаг 3. Рисуем именно тот блок, который соответствует текущему статусу.

Что увидит студент. Пока грузится — «Загрузка…». Если пусто — «Задач нет». Если ошибка — красное сообщение. Если всё ок — список задач с галочками.

type State =
  | { status: 'loading' }                    // посылка в пути
  | { status: 'empty' }                      // пришла пустой
  | { status: 'success'; tasks: Task[] }     // пришли задачи
  | { status: 'error'; message: string };    // потерялась

// в шаблоне проверяем статус по очереди
@if (state().status === 'loading') {
  <p>Загрузка…</p>
} @else if (state().status === 'error') {
  <p>Ошибка: {{ state().message }}</p>
} @else if (state().status === 'empty') {
  <p>Задач нет</p>
} @else {
  @for (t of state().tasks; track t.id) { <app-task-item [task]="t" /> }
}

Интерактивная песочница

Контекст. Здесь — упрощённая версия тех же идей на чистом JavaScript и fetch (это «курьер» в обычном JS, без Angular). Вы можете нажать кнопку и увидеть все три состояния своими глазами.

Аналогия из жизни 💡 Песочница — это тренажёр магазина. Нажимаете «Загрузить» — курьер бежит на склад. Если склад работает — приносит товар (список). Если выключить json-server — склад закрыт, и курьер возвращается с «Ошибкой». Если склад пустой — приносит «Задач нет».

Пошаговый разбор.

• Шаг 1. Нажимаете «Загрузить» → запускается функция load().
• Шаг 2. Сразу показываем «Загрузка…» (состояние loading).
• Шаг 3. Делаем fetch на сервер. Если ответ не ok — бросаем ошибку.
• Шаг 4. Получаем задачи: если их 0 — «Задач нет» (empty), иначе рисуем список (success).
• Шаг 5. Если на любом шаге что-то сломалось — попадаем в catch и показываем «Ошибка» (error).

▶️ Что увидит студент. При включённом json-server — список задач с галочками. При выключенном — красная строка «Ошибка: Failed to fetch». При пустой базе — «Задач нет (empty)».

Проверьте себя

Практика к уроку 7. Это последняя практическая работа занятия 2. На главную →

📖 Глоссарий

🧠 Самопроверка